css中的定位

2021-09-02 11:43:32 字數 925 閱讀 5845

@[toc]css

初學css的時候對position的各個屬性了解的並不全面,前些天進行複習的時候總結了一下,記錄下來,防止遺忘。

fixed

固定定位。會脫離文件流,定位後空間釋放,相對於瀏覽器。固定定位。會脫離文件流,定位後空間釋放,相對於瀏覽器。

absolute

絕對定位。定位的元素,總是相對於其最近的定義為absolute/relative的父元素,但是不一定是直接的父元素。如果沒有的話,就相對於body。定位後空間釋放。絕對定位。定位的元素,總是相對於其最近的定義為absolute/relative的父元素,但是不一定是直接的父元素。如果沒有的話,就相對於body。定位後空間釋放。

relative

相對定位。定位的元素,相對自己的初始位置,無論父元素是何種定位。元素並不脫離文件流,因此元素原本的位置會被保留,定位後空間不釋放,其他的元素位置不會受到影響。相對定位。定位的元素,相對自己的初始位置,無論父元素是何種定位。元素並不脫離文件流,因此元素原本的位置會被保留,定位後空間不釋放,其他的元素位置不會受到影響。

sticky

會有乙個吸頂效果,就是吸在指定位置的top、left,會有空間釋放。比如滾動條滾動到了乙個指定的位置,類似於最上面的欄,滾動到最上面之後就不動了。該元素並不脫離文件流,仍然保留元素原本在文件流中的位置。

static

是position的預設值,元素處於正常的文件流中,會忽略left、top、right、bottom和z-index屬性。

總結:

父級元素position必為relative,而定位於父級內部某個位置的元素最好用absolute(因為這樣可以不受父元素padding的影響)。

css中的定位

本文只是個額外的說明,作為基礎知識的補充和額外的關注點 定位的分類以及預設定位 fix,static,relative,absolute 各個定位的包含塊是怎麼樣的 1.relative和static的包含塊由最近的塊級框,表單元格或行內塊祖先框的內容邊界構成 2.fixed的包含塊是視窗本身 3....

css中的定位

在css中避免不了定位,在實際開發中,關於定位模組有很多,定位有三種型別,絕對定位,相對定位,固定定位 1.絕對定位 position absolute 絕對定位 使元素脫離文件流,使元素提公升了半個層級 如果不指定定位父級,那麼絕對定位相對於文件可視區定位 塊元素 寬度不自適應,如果不設定大小,大...

CSS中的定位

static定位 position static 是元素在文件流中的預設定位,一般不會顯示寫出來,他會按照先後順序排列元素。fixed 定位 position fixed 跟他的名字一樣,使用這個定位,可以讓元素釘 在螢幕可視區域中,定位也是 相對於可視區域定位的。relative相對定位 posi...