13 CSS 的position属性

  • 13 CSS 的position属性已关闭评论
  • 77 次浏览
  • A+
所属分类:Web前端
摘要

就像photoshop中的图层功能会把一整张图片分层一个个图层一样,网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的,然后通过定位属性position对元素进行定位摆放,最终实现网页的布局。


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>