關(guān)于CSS盒子模型之定位的具體分析

css盒子模型之定位

1、Static 定位

HTML元素的默認值，即沒有定位，元素出現(xiàn)在正常的流中。
靜態(tài)定位的元素不會受到top, bottom, left, right影響。

2、Fixed 定位

元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：

Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。
Fixed定位的元素和其他元素重疊。

3、Relative 定位

相對定位元素的定位是相對其正常位置。

可以移動的相對定位元素的內(nèi)容和相互重疊的元素，它原本所占的空間不會改變。

相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊。

4、Absolute 定位

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于:

Absolutely定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。
Absolutely定位的元素和其他元素重疊。

重疊的元素
元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面，或后面）
一個元素可以有正數(shù)或負數(shù)的堆疊順序：
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

相對與絕對定位的區(qū)別

絕對定位（absolute）：
1、將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top， bottom等屬性相對于其最接近的一個最有定位設(shè)置的父級對象進行絕對定位，如果對象的父級沒有設(shè)置定位屬性，即還是遵循HTML定位規(guī)則的，則依據(jù) body 對象左上角作為參考進行定位。
2、絕對定位對象可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數(shù)，大的在最上面，可以有負值。
相對于最近的非標準流定位，原來的位置消失，被后邊的位置所頂替

相對定位（relative）：
相對于原來的位置，但是原來的位置仍然保留。
對象不可層疊，依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移自身位置。
同樣可以用z-index分層設(shè)計。

[教程] 徹底弄懂CSS盒子模式四(絕對定位和相對定位)

示例：

<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*多個標簽同時設(shè)置，使用逗號分隔*/
 body, p, ul, li, img, a {
 margin: 0;
 padding: 0;
 }

 /*給定圖片尺寸：否則會超出父容器，堆疊在一起*/
 img {
 width: 100%;
 height: 100%
 }

 /*讓a標簽絕對于li標簽，li要設(shè)置relative*/
 li {
 list-style: none;
 position: relative;
 float: left;
 padding: 1%;
 width: 18%;
 }

 /*讓刪除紅叉處于li的右上角，且需給定大小*/
 a {
 background: url(images/close.png);
 width: 16px;
 height: 16px;
 position: absolute;
 top: 0;
 right: 0;
 }</style>

效果圖：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com