關于CSS盒子模型之定位的具體分析

css盒子模型之定位

1、Static 定位

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

2、Fixed 定位

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

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

3、Relative 定位

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

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

相對定位元素經常被用來作為絕對定位元素的容器塊。

4、Absolute 定位

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

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

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

相對與絕對定位的區別

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

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

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

示例：

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

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

 /*讓a標簽絕對于li標簽，li要設置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>

效果圖：

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