简单介绍CSS定位position属性

2018-05-07 本文已影响0人初入前端的小菜鸟

定位

position 属性规定元素的定位类型
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position值

值	定义
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

position:absolute;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
  .pt{
    width:300px;
    height:300px;
    border:1px solid red;
    padding:10px;
  }
  .pt>div{
    width:80px;
    height:20px;
    border:1px solid;
  }
  .box1{
    background:red;
  }
  .box2{
    background:yellow;
    margin:10px 0;
  }
  .box3{
    background:green;
  }
  </style>
</head>
<body>
<div class="pt">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>
</body>
</html>

当我们给box1设置position:absolute;属性

.box1{
    background:red;
    position:absolute;
  }

absolute
absolute属性值：absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL）定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。
当我们给box1设置left:0px;和top:0;时

.box1{
    background:red;
    position:absolute;
    left:0px;
    right:0px;
  }

TRBL定位

box1回归到浏览器的左上角

absolute决定定位参考点：

1.当不设置TRBL定位时，以父级的左上角进行定位。在没有父级的时候，他是参照浏览器左上角。
2.如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
3.如果我们给父元素设置了相对定位relative时，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
例：

.pt{
    width:300px;
    height:300px;
    border:1px solid red;
    padding:10px;
    margin:10px;
    position:relative;
  }

父元素设有相对定位relative
position:absolute;属性示例：demo1

position:fixed;

  <style>
    *{
      margin:0;
      padding:0;
    }
  .pt{
    width:300px;
    height:300px;
    border:1px solid red;
    margin:10px;
  }
  .pt>div{
    width:80px;
    height:20px;
    border:1px solid;
  }
  .box1{
    background:red;
  }
  .box2{
    background:yellow;
    margin:10px 0;
  }
  .box3{
    background:green;
  }
  </style>
</head>
<body>
<div class="pt">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>
</body>

当给box1设置fixed和TRBL值时：

.box1{
    background:red;
    position:fixed;
   }

position:fixed;
fixed:会使定位元素脱离文档流。
设置TRBL：

.box1{
    background:red;
    position:fixed;
    left:0px;
    top:0px;
  }

会相对于浏览器窗口左上角进行定位。

TRBL定位
定位点:
1.当不设置TRBL定位时，以父级的左上角进行定位。在没有父级的时候，他是参照浏览器左上角。
2.设置TRBL定位时，则会相对于浏览器窗口左上角进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position:fixed;属性值练习:demo2

position:relative;

  <style>
    *{
      margin:0;
      padding:0;
    }
  .pt{
    width:300px;
    height:300px;
    border:1px solid red;
    margin:10px;
  }
  .pt>div{
    width:80px;
    height:20px;
    border:1px solid;
  }
  .box1{
    background:red;  
    
  }
  .box2{
    background:yellow;
    margin:10px 0;
  }
  .box3{
    background:green;
  }
  </style>
</head>
<body>
<div class="pt">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>
</body>

当我们给box1设置position:relative;时

.box1{
    background:red;  
    position:relative;
  }

relative

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
设置TRBL值是：

.box1{
    background:red;  
    position:relative;
    left:30px;
    top:30px;
  }

TRBL
则按照父元素的左上角进行相对应的定位。
定位点:
1.如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样).
2.如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)。
3.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位,位置由TRBL决定(前半段和absolute一样)。如果父级有Padding属性,那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。
positon;relation;属性值练习:demo3

position:static

默认值，没有定位，元素出现在正常的流中，忽略top、right、bottom与left值。忽略z-index声明。

使用场景

position开发中常见应用:
1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)