HTML定位的型別

2021-10-14 01:45:51 字數 1129 閱讀 9364

定位:可以使乙個標籤布局在頁面中任意乙個位置上

定位型別:

1、固定定位:可以一直固定在我們視窗的某個位置
position:fixed

2、相對定位:相對自己定位(不會脫離文件流,不會對他下面的元素造成影響)

position:relative

3、決定定位:(會脫離文件流)

position:absolute

3.1會相對於距離最近的有定位元素的父元素進行定位

3.2如果父元素都沒有定位就相對於頁面定位

3.3會脫離文件流

下面源**可以拷貝執行,觀察定位的原理和如何定位

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

定位title

>

>

*body

.mydiv

.box

.myclass1

.myclass2

.myclass3

.myclass21

style

>

head

>

>

class

="box"

>

class

="myclass1"

>

1div

>

class

="myclass2"

>

2 class

="myclass21"

>

2-1div

>

div>

class

="myclass3"

>

3div

>

div>

body

>

html

>

html 定位 CSS Position定位

說明position 屬性指定了元素的定位型別。position 屬性的五個值 元素可以使用的頂部,底部,左側和右側屬性定位。所有的css定位屬性 bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。值 clip 剪輯乙個絕對定位的元素 cursor 顯示游標移動到指定的型別 lef...

html 中的定位

html分相對定位和絕對定位 絕對定位元素會去尋找擁有定位屬性的父元素,如果沒有就會一直向上找知道body標籤為止 charset utf 8 title type text css box1 box2 box3 style head id box1 div id box2 div id box3 ...

html的幾種定位

css的定位有以不幾種 1.static定位 這是乙個預設的方式 對static而言,left 和right是沒有效果的 2.relative定位 相對定位 元素框移某個距離 left和 top 元素本身形狀不發生變化,它原本所佔的空間仍保留,從這一角度,好像元素仍在文件流中一樣。特別說明 rela...