- A+
所属分类：Web前端
13 CSS 的position属性
就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。
定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。默认就是static。所以我们略过。
元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。
方位属性：
/* top：让元素相对于指定目标的顶部偏移指定的距离。 例如： top：10px; 表示距离顶部10像素 right：让元素相对于指定目标的右边偏移指定的距离。 例如： right：10px; 表示距离顶部10像素 bottom：让元素相对于指定目标的底部偏移指定的距离。 例如： bottom：10px; 表示距离顶部10像素 left：让元素相对于指定目标的左边偏移指定的距离。 例如： left：10px; 表示距离顶部10像素 */ - 相对定位（relative）
相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。
.c1{ width: 200px; height: 200px; background-color: indianred; } .c2{ width: 200px; height: 200px; background-color: orange; position: relative; left: 200px; top: 200px; } .c3{ width: 200px; height: 200px; background-color: lightblue; } - 绝对定位（absolute）
绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。
轮播图案例：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf8"> <style> *{ margin: 0; padding: 0; } .lunbo{ width: 590px; height: 470px; border: 1px solid rebeccapurple; margin: 100px auto; position: relative; } .lunbo ul{ list-style: none; } .lunbo .img li{ position: absolute; top: 0; left: 0; } .lunbo .btn li{ font-size: 25px; width: 40px; height: 40px; background-color: gray; text-align: center; line-height: 40px; border-bottom-right-radius: 50%; border-top-right-radius: 50%; color: white; position: absolute; top: 50%; margin-top: -20px; } .lunbo .left_btn{ left: 0; } .lunbo .right_btn{ right: 0; } </style> </head> <body> <div class="lunbo"> <ul class="img"> <li><a href=""><img src="imgs/1.jpg" alt="13 CSS 的position属性" alt=""></a></li> <li><a href=""><img src="imgs/2.jpg" alt="13 CSS 的position属性" alt=""></a></li> <li><a href=""><img src="imgs/3.jpg" alt="13 CSS 的position属性" alt=""></a></li> <li><a href=""><img src="imgs/4.jpg" alt="13 CSS 的position属性" alt=""></a></li> <li><a href=""><img src="imgs/5.jpg" alt="13 CSS 的position属性" alt=""></a></li> </ul> <ul class="btn"> <li class="left_btn"> < </li> <li class="right_btn"> > </li> </ul> </div> </body> </html> - 固定定位（fixed）
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf8"> <style> body{ margin: 0; } .c1{ width: 100%; height: 2000px; background-color: lightgray; } .c2{ width: 200px; height: 60px; background-color: yellowgreen; text-align: center; line-height: 60px; position: fixed; right: 20px; bottom: 20px; } </style> </head> <body> <div class="c1"></div> <div class="c2">返回顶部</div> </body> </html> 
