css中的定位屬性和方法

2021-10-09 15:58:36 字數 714 閱讀 8747

# 定位

1.靜態定位:

html元素的預設值即沒有定位,遵循正常的文件流物件,靜態定位的元素不會受到top,bottom,left

right的影響

position:static;

2.固定定位:fixed定位在ie7和ie8下需要描述 !doctype 才支援

fixed定位使元素的位置與文件流無關,因此不佔據空間

fixed定位的元素和其他元素重疊

position:fixed;

3.相對定位:相對定位元素的定位是相對其正常位置,移動相對定位元素,但它原來所佔空間不會改變

position:relative;

4.絕對定位:

絕對定位的元素位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於absolute定位使元素的位置與文件流無關,因此不佔據空間

absolute定位的元素和其他元素重疊

position:absolute;

5.粘性定位:position:sticky;

6.overflow:

visited預設值,內容不會被修剪,會呈現在元素框之外

hidden:內容會被修剪並且其餘內容是不可見的

scroll:內容會被修剪但是瀏覽器會顯示滾動條,以便檢視其餘的內容

auto:如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容

CSS中的定位屬性

css 定位令你可以將乙個元素精確地放在頁面上你所指定的地方。脫離原位置進行定位 下面舉個絕對定位的例子 在文件的四個角落各放四個盒子 html 段 box1 box2 box3 box4 css 段 div box1 box2 box3 box4 效果圖 保留原位置進行定位 其位置是相對於它在文件...

CSS中定位屬性的常見屬性值

在使用css對頁面布局時,我們常會使用到定位屬性,定位主要應用於乙個元素在另外乙個元素之上,或者我們需要在網頁中精準地確定某乙個元素的位置,並且這個元素有明確的參照物。其常見的屬性值有五個 一 position static 預設值 預設值通常沒有任何布局效果,定位中的static也是這樣的存在。二...

CSS的定位屬性

說到css的定位屬性,首先談一下css的三種定位機制。今天介紹的是第三種定位流,他的定位屬性position有以下幾種情況 1.static 預設值 沒有定位 2.relative 相對定位 參照物 自己所在的位置 特點 如果沒有定位偏移量,對元素本身沒有任何影響,不使元素脫離文件流,空間會被保留,...