CSS定位的使用

2022-06-16 17:27:11 字數 972 閱讀 2925

1.相對定位 相對於元素自身的偏移

position: relative;

top: 20px;

left: -50px;

relative宣告了之後,在下方宣告四個方向的位置偏移量

這裡注意方向 相對於原來的top有了20px的距離,相對於原來的left有了-50px的距離,因此元素是向下和向左移動

雖然元素會出現偏移出父級元素的情況,但這並不是浮動,父級元素仍然保留有其原來的位置

2.絕對定位

position: absolute;
與父級元素完全無關,相對於瀏覽器進行定位

當父級元素擁有相對定位時,絕對定位會相對於父級元素進行定位 

3.固定定位

position: fixed;
相對於瀏覽器位置不會改變,頁面改動,元素位置也不會改變

4.z-index

首先要有圖層的概念

這裡舉例:頁面實現如下效果

最底下是img 然後乙個背景為黑色的空div,然後是乙個text,此時的顯示介面如圖,但當在空的黑色div使用了

.block
後頁面:

此時空div的圖層優先順序比text高所以優先展示,z-index從0開始越大優先順序越高,反之亦是如此;

css粘性定位sticky的使用

在做h5頁面的過程中,經常會遇到這種情況,頁面滾動到一定位置的時候,那個元素需要固定在頂部,之前都是用js去計算再實現,其實用css來實現更加方便 html div p 粘性定位 p div css div p 頁面滾動到div的位置的時候,p元素就會浮動固定在頂部,超出div就不浮動了。實際專案中...

CSS定位position使用介紹

一 定義 設定元素的偏移效果,一般配合left top right bottom屬性共同作用,用於元素定位。二 position 屬性值介紹 說明 1 文件流 元素未定位前 偏移前 的原本所佔的空間仍保留 非文件流 元素未定位前 未偏移前 的原本所佔的空間由後面元素填充,被其占用。2 相對元素 作為...

CSS定位使用方法

對於網頁頁面布局來說,使用定位進行布局十分的方便。絕對定位 使用絕對定位應當將父元素設定為相對定位,否則元素絕對定位的基準會一直尋找外層非靜態定位元素 doctype html html lang en head meta charset utf 8 title title title style ...