溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS定位與層疊的用法”，在日常操作中，相信很多人在CSS定位與層疊的用法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS定位與層疊的用法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
position：static(靜態定位)
當position屬性定義為static時，可以將元素定義為靜態位置，所謂靜態位置就是各個元素在HTML文檔流中應有的位置
podisition定位問題。所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，它會遵循默認顯示為靜態位置，在靜態定位狀態下無法通過坐標值（top,left,right,bottom）來改變它的位置。
position：absolute(絕對定位)
當position屬性定義為absolute時，元素會脫離文檔流，完全不受文檔流的影響，根據某個參照物坐標來定位它的位置.當絕對定位元素沒有顯示的指明top,right,bottom,left定位屬性時，它還是暫時未脫離文檔流，并受文檔流的影響，具有相對定位的特性，但是它在文檔流中的位置已經不存在了。如果絕對定位只顯示的定位x軸或者Y軸，那它只具備這個方向上的定位能力，另一個方向仍然顯示為相對定位的特性。
坐標值：
top:表示定位元素頂邊外壁到參照物元素頂部內壁的距離
right:表示定位元素右邊外壁到參照物元素右側內壁的距離
left:表示定位元素左邊外壁到參照物元素左側內壁的距離
bottom:表示定位元素底邊外壁到參照物元素底部內壁的距離
XML/HTML Code復制內容到剪貼板
<div id="box">box
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>
CSS Code復制內容到剪貼板
#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
}
#boxA{
position:absolute;
top:100px;
left:100px;
width:50px;
height:50px;
background: #3E7DB0;
}
大盒子box在整個網頁中距頂部40px居中顯示，但是boxA由于position定位為絕對定位，它脫離了大盒子，距整個網頁左邊100px頂部100px，當元素定義為絕對定位，可以根據結合它的坐標屬性（top,left,bottom,right）來精確定位它的位置
position:relative(相對定位)
相對定位好似一種折中的方法，是在靜態定位和絕對定位中去一個平衡點，所謂相對定位就是使被應用的元素不脫離文檔流，卻能夠通過坐標值以原始位置為參照物進行偏移。
坐標值：
top:表示定位元素頂邊外壁到原始位置頂部外壁的距離
right:表示定位元素右邊外壁到原始位置元素右側外壁的距離
left:表示定位元素左邊外壁到原始位置元素左側外壁的距離
bottom:表示定位元素底邊外壁到原始位置元素底部外壁的距離
XML/HTML Code復制內容到剪貼板
<div id="box">
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>
CSS Code復制內容到剪貼板
#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
}
#boxA{
position:relative;
top:100px;
left:100px;
width:50px;
height:50px;
background: #3E7DB0;
}
#boxB{
width:50px;
height:150px;
background: #B9C8C5;
}
#boxC{
width:50px;
height:50px;
background: #1D92C8;
}
#boxD{
width:400px;
height:50px;
background: #086499;
}
大盒子box在整個網頁中距頂部40px居中顯示，當元素boxA由于position定義為相對定位，相對于它本身的位置的位置進行偏移，據原先的位置左100px和頂部100px，當遇到文檔流boxD時，它會覆蓋boxD。相對定位雖然偏離了原始位置，但是它的原始位置所占據的空間仍然保留著，并沒有被其它元素所占據。
position：fixed(固定定位)
固定定位是絕對定位的一種特殊形式，它是以瀏覽器窗口作為參照物來定義網頁元素，如果定義某個元素固定顯示，則該元素不在受文檔流的影響。他始終以瀏覽器窗口來定位自己顯示的顯示位置，不管瀏覽器窗口如何滾動，也不管瀏覽器窗口大小如何變化，該元素都會顯示在瀏覽器窗口內。通俗的說就是以瀏覽器窗口的四條邊作為坐標系來定位元素的位置。
XML/HTML Code復制內容到剪貼板
<div id="box">box </div>
<div id="fixed">fixed</div>
CSS Code復制內容到剪貼板
#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
position:fixed;
left:100px;
top:100px;
}
#fixed{
height:4000px;
}
當把box定義為固定定位時，box永遠都是在瀏覽器窗口內，fixed屬性還可通過left，right,top,bottom來控制從流浪器不同邊框來進行定位。
相對定位(relative)與絕對定位(absolute)：
XML/HTML Code復制內容到剪貼板
<div id="box">box
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>
如果box把 position屬性定義為relative，只有它的子元素boxA和boxB position屬性定義為absolute才能相對box定位，而他的孫子元素boxC和boxD把position定義為absolute并不能相對box來定位。但是如果把boxB的position屬性定義為relative，它底下的子元素boxC和boxD就能相對于父元素boxB來定位，所以，把position屬性定義為relative的元素，只有它的子元素才能相對它定位，孫子元素并不能相對它定位。相對定位與絕對定位的結合使用可以更加精確的控制網頁元素，設計出更強大的布局效果。
position屬性定位小工具：www.linxz.de/css_tool/position_demo.html
層疊：
css可以通過z-index屬性來排列不同定位元素之間的層疊順序，該屬性可以設置任何整數值，數值越大，所排列的順序越靠前。
XML/HTML Code復制內容到剪貼板
<div id="box">box
2 <div id="boxA">boxA</div>
3 <div id="boxB">boxB</div>
4 <div id="boxC">boxC</div>
5 </div>
CSS Code復制內容到剪貼板
#boxA,#boxB,#boxC{
width:100px;
height:200px;
position:absolute;
}
#boxA{
background: #086499;
z-index:1;
left:100px;
}
#boxB{
top:50px;
left:50px;
background: #B9C8C5;
z-index:2;
}
#boxC{
top:100px;
background: #1D92C8;
z-index:3;
}
boxC排在最上面，boxB在最中間，boxA在最后。z-index的值越大越靠前。
到此，關于“CSS定位與層疊的用法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
