CSS基础-定位position

前言

在HTML中实现网页布局时，比较常见的改变布局方式的CSS方法有三种：浮动、盒模型、定位。前两种方法在实现常规排列整齐的网页布局时应用较多，当我们出现一些例如元素覆盖、元素需要放置在具体位置的需求时，我们就需要用到定位属性。

---

定位

定位在css中的格式为：position：；，设置了定位的元素会以设置了定位的参考元素为参考（没有参考元素则默认浏览器窗口为参考），再添加top/bottom/left/right值进行定位。

定位常见的属性值

• static
• absolute
• relative
• fixed
• sticky

（1）position:static;

static是position的默认值：设置了static值后元素没有定位，也不会脱离正常的文本流，同时设定的top/bottom/left/right值和z-index声明也不起作用。

（2）position:absolute;

absolute是posotion里面的绝对定位属性：设置absolute属性的元素生成绝对定位，并脱离正常文本流，同时向外找到第一个设置了定位position属性(static除外)的父元素为参考，再结合top/bottom/left/right值进行定位。


box1设置绝对定位后，向外没有设置定位的父元素，则以浏览器窗口为参考，距离浏览器左侧20%距离。
box3设置绝对定位后，box4向上移动，box3向外找到第一个设置了定位的父元素box1，以box1为参考，定位在最右侧与最下方的右下角位置。

（3）position:relative;

relative是position里面的相对定位属性：设置了relative属性的元素会生成相对定位，相对定位的参考元素是元素本身，通过设置top/bottom/left/right来定位，同时设置相对定位后的元素仍占据设置定位前所占据的空间。


box3设置了相对定位属性，以自身为参考向右向下移动20px,同时设置定位前box3占据的空间依旧保留。

（4）position：fixed;

fixed是position里面的绝对定位属性：设置了绝对定位的元素生成绝对定位，绝对定位以浏览器窗口为参考，通过设置top/bottom/left/right来定位，并且在随网页滚动条拖动时，仍保持相对于浏览器窗口的位置不变。

box1设置了绝对定位，固定定位在浏览器窗口的右下角，不随滚动条拖动而改变位置。

（5）position:sticky;

sticky是position里面的粘性定位属性：设置了sticky属性的元素生成粘性定位，并且再通过设置top/bottom/left/right来设定一定的数值，当滚动条上下或左右滑动，距离没有到达设定的数值时，元素执行的效果与relative相同；当距离达到设定的数值时滑动，元素执行的效果则与fixed相同。这种定位方式常用于网页导航栏的顶部吸附效果。



p标签设置了position:sticky;top:20px; ,当滚动条向下滑动，顶部没有到达距离p标签的20px距离时，元素执行position:relative效果；当顶部距离元素到达20px时，元素执行position:fixed效果，固定离顶部20px。

---

补充：定位层次显示及覆盖透明显示

正如前面所提到的，定位可以解决许多布局需求，如元素覆盖等等。而针对于定位带来的覆盖问题，我们可以利用z-index进行一个层次的优先顺序。
1.CSS属性格式：z-index:数值；默认为auto并且与网页中的元素同级，这时后写的元素层次优先级高，会覆盖之前写。如果需要覆盖在其他元素之上则可以加入CSS属性z-index：1;属性的数值越高层次优先级越大。
2.覆盖后透明显示可以使用rbga(颜色数值1，颜色数值2，颜色数值3，透明度数值),透明度数值范围0-1，0是全透明，1是不透明。