CSS學習之五定位布局

2024-07-11 08:26:28

字體：大中小

來源：轉載

供稿：網友

一、定位屬性的基本情況

使用position屬性對元素進行定位：

position屬性

值：static | absolute | fixed | relative
初始值：static
運用范圍：所有元素
繼承值：無
計算值：根據指定確定

static：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。

relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute：元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素定位后生成一個塊級框，而無論原來它在正常流中生成何種類型的框。

fixed：元素框表現類似于absolute，不過其包含塊是視窗本身。

二、解釋定位元素的包含塊

假設有如下所示HTML結構：

復制代碼

代碼如下:
<div class="father position_a">距離窗口上端100px，距離窗口左端0px</div>

給它添加如下樣式：

復制代碼

代碼如下:
* { margin: 0; padding: 0; }
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; }
div { margin-top: 5px; }
.conclusion { margin: 300px 50px ; }
h1, strong { color: red; }
strong, em { font-style: normal; font-weight: normal; }
/* 以上是所有Demo公共樣式，下面的Demo中省略 */
.father { background-color: #999; width: 200px; height: 200px; }
.position_a { position: absolute; top: 100px; left: 0px; }

效果比較簡單，就是一個緊貼著窗口左邊且距離窗口上端100px的盒子，請單擊查看Demo
有如下結論：
在HTML中，根元素的包含塊就是html元素。
說明：為了直觀地查看，實例采用絕對定位方式
下面說明包含塊不是根元素的情況：
HTML結構：

復制代碼

代碼如下:
<div class="father">
<div class="child position_r">相對定位的盒子。相對于塊級父元素頂部偏移10px，左邊偏移10px</div>
包含塊是塊級框
</div>

<div class="father">
<span class="father"><span class="child position_r">相對定位的內聯框。相對于內聯父元素頂部偏移10px，左邊偏移10px</span>包含塊是內聯框</span>
</div>

樣式：

復制代碼

代碼如下:
.position_r { position: relative; top: 10px; left: 10px; }

效果截圖：