CSS 我理解的position

2021-09-26 12:41:29 字數 1221 閱讀 4118

注:本文是《css權威指南》的學習筆記

position:用於定位

元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中。

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

元素框從文件流中完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。

元素框的表現類似於將position設定為absolute,不過其包含塊是視窗本身。

定位元素各邊相對於其包含塊的偏移。

元素絕對定位時,會從文件流中完全刪除,然後相對於其包含塊定位,其邊界根據偏移屬性放置。定位元素不會流入其他元素的內容,反之亦然,這說明,絕對定位元素可能覆蓋其他元素或者被其他元素覆蓋。

絕對定位元素的包含塊是最近的position值不為static的祖先元素。通常會選擇乙個元素作為絕對定位元素的包含塊,將其position指定為relative而且沒有偏移。

絕對定位元素的top、left、right設定為auto,則會按照元素在正常流中原本的位置放置,但是會與其他元素發生重疊。

固定定位與絕對定位類似,但是固定元素的包含塊是視窗。固定定位時,元素會完全從文件流中去除,不會有相對於文件中任何部分的位置。

保留元素在原來文件中的位置。

span
遇到這種情況時bottom會reset成 -top即bottom: -10px;

span 即bottom: -10px等同於top: 10px;
從左到右讀的語言裡,重置right = (-left) 即right: -10px;等同於 left: 10px;

從右往左讀的語言裡,重置left = (-right)

CSS定位position的理解

如一本書上所說,定位的原理很簡單。利用定位,可以準確地定義元素框相對於其正常位置應該出現在 或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。定位包含4種不同的型別會影響元素框生成的方式 position static relative absolute fixed inherit static...

css中position的理解

position static relative absolute fixed static 沒有定位,元素出現在正常的流中。position的預設值,設定position static的情況下,left top right bottom無效。relative 生成相對定位的元素,相對於其正常位置進...

理解position定位

使用css布局position非常重要,語法如下 position static relative absolute fixed center page sticky 預設值 static,center page sticky是css3中新增加的值。1 static 可以認為靜態的,預設元素都是靜態...