CSS 中的position屬性實(shí)例詳解

發(fā)布時(shí)間：2023-09-04 17:03:08 作者：生而自由愛(ài)而無(wú)畏

這篇文章主要介紹了CSS 中的position屬性實(shí)例詳解,定位屬性position有4個(gè)值，分別是靜態(tài)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）和固定定位（fixed），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

CSS 的position屬性

就像photoshop中的圖層功能會(huì)把一整張圖片分層一個(gè)個(gè)圖層一樣，網(wǎng)頁(yè)布局中的每一個(gè)元素也可以看成是一個(gè)個(gè)類似圖層的層模型。層布局模型就是把網(wǎng)頁(yè)中的每一個(gè)元素看成是一層一層的，然后通過(guò)定位屬性position對(duì)元素進(jìn)行定位擺放，最終實(shí)現(xiàn)網(wǎng)頁(yè)的布局。

定位屬性position有4個(gè)值，分別是靜態(tài)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）和固定定位（fixed）。默認(rèn)就是static。所以我們略過(guò)。

元素設(shè)置了定位以后，還要依靠4個(gè)方位屬性來(lái)進(jìn)行定位擺放。

方位屬性：

/*
top：讓元素相對(duì)于指定目標(biāo)的頂部偏移指定的距離。
  例如： top：10px; 表示距離頂部10像素
right：讓元素相對(duì)于指定目標(biāo)的右邊偏移指定的距離。
  例如： right：10px; 表示距離頂部10像素
bottom：讓元素相對(duì)于指定目標(biāo)的底部偏移指定的距離。
  例如： bottom：10px; 表示距離頂部10像素
left：讓元素相對(duì)于指定目標(biāo)的左邊偏移指定的距離。
  例如： left：10px; 表示距離頂部10像素
*/

相對(duì)定位（relative）

相對(duì)定位就是在正常文檔流中，元素相對(duì)于自身位置使用left、right、top、bottom屬性進(jìn)行定位偏移。

.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;
        }

絕對(duì)定位（absolute）

絕對(duì)定位就是將元素脫離文檔流，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父級(jí)元素進(jìn)行絕對(duì)定位，如果不存在這樣的父級(jí)元素，則默認(rèn)是相對(duì)于body元素進(jìn)行絕對(duì)定位。
輪播圖案例：

<!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=""></a></li>
          <li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
      </ul>
      <ul class="btn">
          <li class="left_btn"> < </li>
          <li class="right_btn"> > </li>
      </ul>
  </div>
  </body>
</html>

固定定位（fixed）
固定定位與絕對(duì)定位有點(diǎn)相似，但是固定定位是使用left、right、top、bottom屬性相對(duì)于整個(gè)瀏覽器的窗口進(jìn)行定位，而不再相對(duì)于某個(gè)HTML頁(yè)面元素了，所以當(dāng)元素使用了固定定位以后，就算頁(yè)面的滾動(dòng)條滾動(dòng)了，固定定位的元素也不會(huì)變化位置。也就是說(shuō)固定定位是相對(duì)于窗口的定位，不受文檔流的影響了。

<!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>

到此這篇關(guān)于CSS 的position屬性的文章就介紹到這了,更多相關(guān)CSS position屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！