關於css定位的一些自我總結

2021-10-03 02:34:46 字數 930 閱讀 3784

在瀏覽**時 我們經常會看到一些 文字在上面、導航欄一直在頁面的最上面之類的…

css定位position允許你對元素進行定位 它常用的屬性值一般為5個分別為

static:預設值 設定該屬性是元素會正常顯示 不會識別 left right top bottom指定的座標

absolute:絕對定位, 相對於父級元素的絕對定位 浮出脫離布局流 它不佔空間

relative:是相對預設位置的相對定位

fixed:固定定位 相對於瀏覽器的絕對定位 脫離整個文字流 不佔據空間

sticky:可以看成fixed和relative的結和常用於最上面的導航條(吸頂效果)

static 預設值 我就不說了

講後面幾個值的時候我們先了解一下參照物 參照物我們初中物理就學過

比如 你往前走了100m 這個100m的參照物就是就是你沒走之前的位置

除了static其他的值全部都有參照物體

relative 相對定位 的參照物是元素原先的位置

absolute 絕對定位的參照物是已經有定位的父元素(如果父元素沒有設定定位 將會以整個文件html為參照物)

fixed 固定定位 的參照物是整個文件 html

sticky 粘性定位 的參照物也是整個文件

我們先來對比下relative 相對定位 和absolute 決定定位的不同之處

這是我第一次寫部落格 雖然在看部落格的時候沒感覺什麼 但到寫的時候才知道多難

也可能是我個人問題

這是我 學習 3個星期的 一些關於定位的 總結 我總是善於把簡單的問題複雜化

感謝閱讀

關於CSS定位的一些總結

所有主流瀏覽器都支援 position 屬性。position屬性規定元素的定位型別,影響元素框生成的方式。值描述 absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位,如果不存在這樣的父元素,則依據最初的包含快。根據使用者 的不同,最初的包含塊可能是畫布或 h...

關於css定位的一些理解

static 預設值。無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z index屬性定義 fixed ...

關於CSS學習的一些總結

接觸css有很長的一段時間了,我對它的感情每次都有些不同,簡單 費解 神奇 好玩 css就是這麼一門不正交的語言,你無需一步步從頭學起,它就像樂高積木,學會了一點就能用上一點。儘管css不正交,屬性也比較多不好記,但沒關係,你只要記住用的最多的幾種方法足矣應付業務中大部分需求 除了以上用的最多的幾種...