就像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"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer .img img{ width: 590px; height: 470px; } .outer{ width: 590px; height: 470px; margin: 100px auto; position: relative; border: 1px solid red; } .outer ul{ list-style: none; } .outer .img li{ position: absolute; top: 0; left: 0; } .outer .hide{ display: none; } .outer .num{ position: absolute; z-index: 100; bottom: 16px; left: 16px; } .outer .num li{ display: inline-block; width: 16px; height: 16px; background-color: lightgray; text-align: center; line-height: 16px; border-radius: 50%; margin-left: 5px; } .num li.current{ background-color: red; } .btn li{ position: absolute; top:50%; width: 30px; height: 60px; background-color: gray; text-align: center; line-height: 60px; color: white; margin-top: -30px; } .btn .left_btn{ left: 0; } .btn .right_btn{ right: 0; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt=""></a></li> <li class="hide"><a href=""><img src="https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt=""></a></li> <li class="hide"><a href=""><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt=""></a></li> </ul> <ul class="num"> <li class="current"></li> <li></li> <li></li> <li></li> <li></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>