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

css盒子模型之定位

1、Static 定位

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

2、Fixed 定位

元素的位置相對(duì)于瀏覽器窗口是固定位置。
即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：

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

3、Relative 定位

相對(duì)定位元素的定位是相對(duì)其正常位置。

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

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

4、Absolute 定位

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

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

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

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

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

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

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

示例：

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

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

 /*讓a標(biāo)簽絕對(duì)于li標(biāo)簽，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)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com