了解CSS定位

2021-10-10 16:48:06 字數 1126 閱讀 1732

定位允許您從正常的文件流布局中取出元素,並使它們具有不同的行為。如當您想要需要對頁面做一些細節方面的調整可以選擇用定位的方式,從而不影響頁面的布局。

靜態定位只是意味著將元素放入它在文件布局流中的正常位置,沒有脫離文件流。

相對定位依然沒有脫離文件流,但是可以修改相對定位的位置(包括與其他元素重疊)。利用top,bottom,left和right屬性可以使相對定位的元素進行移動。

body內容為:

class

="demo-box"

>

class

="demo-top"

>

div>

class

="demo-bottom"

>

div>

div>

css樣式為:

.demo-box

.demo-top

.demo-bottom

執行的結果是這樣的:

那麼當您想要將紅色div移動下來可以給css樣式新增這個語句。

很明顯當紅色div下移時,藍色div變小,同時,您會發現綠色邊框的高度沒有發生任何變化。相對定位的元素不會影響父容器的大小和變化,但是相對定位元素的位置還是保留在**的。

會讓元素脫離文件流 ,不佔據頁面位置。

例如當讓紅色div進行絕對定位時,css樣式為:

紅色div將藍色div蓋住,並且父容器沒有為紅色div留出相應的位置。

固定定位與絕對定位的方式相同,只有乙個主要區別:絕對定位固定元素是相對於 元素或其最近的相對定位祖先,而固定定位固定元素則是相對於瀏覽器視口本身。

了解CSS定位

1 靜態定位 預設情況 static 下所有的元素都是靜態定位的 2 相對定位 relative 3 絕對定位 absolute 4 固定定位 fixed 相對定位的參考點在 特點 形影分離,老家留坑 相對定位怎麼使用?一般來說都不會使用相對定位將元素進行大幅度的移動,只用來做元素的微調。子絕父相 ...

快速了解CSS絕對定位和相對定位

我們都知道css定位有很多,今天我們來簡單了解絕對定位 absolute 和相對定位 relative 1絕對定位 absolute 絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於html h2 2相對定位 relative 相對定位元素經常被用來作為絕...

你真的了解嗎 CSS 溢位 浮動 定位

position sticky overflow 屬性用於控制內容溢位元素框時顯示的方式 屬性值描述 visible 預設值。內容不會被修剪,會呈現在元素框之外 hidden 內容會被修剪,並且其餘內容是不可見的 scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容 auto 如果內...