首頁  >  文章  >  web前端  >  CSS 定位position屬性詳細介紹(附範例)

CSS 定位position屬性詳細介紹(附範例)

王林
王林原創
2019-08-15 18:14:514130瀏覽

前言:在使用css給頁面進行排版美化的過程中,常會用到pposition屬性。那麼,接下來我們就詳細介紹一下position屬性。

推薦影片教學:css影片教學

首先,我們先寫一個HTML文件,利用css實作多行內容垂直居中。

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

接下來我們使用css進行佈局排版:

.wrap{
width:100%;
height:400px;
display:table;
}
.content{
display:table-cell;
vertical-align:table;
text-align:center;
}

#position屬性:

##一

、靜態定位/常規定位/自然定位static

作用:使元素定位於自然流中

#1、忽略top、bottom、left、right或z-index宣告

2、兩個相鄰的元素如果都設定了外邊距,那麼最終外邊距=兩者外邊距中最大的

3、具有固定width和height值的元素,如果把左右外邊距設為auto,則左右外邊距會自動擴大到佔滿剩餘寬度,造成的效果就是這個塊水平居中

二、 相對定位relative

作用:使元素成為可定位的祖先元素

特點

1、可以使用top/right/bottom/left/z-index進行相對定位,相對元素在自然流中的位置

2、相對定位的元素在自然流中的位置會被保留

3、任何元素都可以設定為relative,它的絕對定位的後代都可以相對於它進行絕對定位

4、可以使浮動元素發生偏移(解決兩個浮動元素設定t/r/b /l無效的問題),並控制它們的堆疊順序

三、絕對定位absolute

作用:使元素脫離自然流

特點

1、脫離自然流

2、設定尺寸的百分比比的是最近可定位的祖先元素

3、lrtb如果設定為0,它將對齊到最近可定位祖先元素的各邊(衍生水平垂直居中妙計)

4、如果沒有最近可定位祖先元素,會認定為可定位祖先元素

5、z-index可以控制堆疊順序

四、 固定定位fixed

作用:和絕對定位作用相似

特點

1、相對於瀏覽器視窗定位

2、固定定位元素不會隨著視窗捲動而捲動

#3、繼承absolue的特色

利用position實作子元素垂直居中

<div class="wrap">
    <div class=""content></div>
</div>
.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}

以上是CSS 定位position屬性詳細介紹(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:pt是什麼單位下一篇:pt是什麼單位