了解CSS定位

2022-08-23 04:03:14 字數 931 閱讀 1698

1、靜態定位 預設情況(static)下所有的元素都是靜態定位的

2、相對定位 relative

3、絕對定位 absolute

4、固定定位 fixed

相對定位的參考點在**?

特點:「形影分離,老家留坑」

相對定位怎麼使用?

一般來說都不會使用相對定位將元素進行大幅度的移動,只用來做元素的微調。

子絕父相(當子元素絕對定位時,父元素使用相對定位)

子絕父絕(固)也是可以的,但是不推薦使用

注意:相對定位不會脫標

絕對定位會脫標

絕對定位的元素脫標之後,沒辦法補救,所以一定要慎用。

絕對定位的參考點在**?

1、如果定位元素的祖先元素中沒有任何使用了定位的元素,那麼這時候定位元素的參考點是body的左上角。

2、如果定位元素的祖先元素中存在使用了定位的元素(跟定位方式無關),那麼這時候參考點是離定位元素最近的並且使用了定位的祖先元素的左上角。

如果乙個元素使用了絕對定位,那麼此時它的margin值不能是auto。

對於脫標的元素來說,margin值都不能是auto。

絕對定位的常見考點:

絕對定位的參考點如果是body,那麼是相對首屏定位的。

position: fixed;

特點:脫標

z-index

要注意的點:

1、所有的元素預設z-index都是0

2、只有定位(除開靜態定位)的元素設定z-index才有效

沒有定位的元素設定z-index是沒用的

了解CSS定位

定位允許您從正常的文件流布局中取出元素,並使它們具有不同的行為。如當您想要需要對頁面做一些細節方面的調整可以選擇用定位的方式,從而不影響頁面的布局。靜態定位只是意味著將元素放入它在文件布局流中的正常位置,沒有脫離文件流。相對定位依然沒有脫離文件流,但是可以修改相對定位的位置 包括與其他元素重疊 利用...

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

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

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

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