CSS定位position屬性示例-創(chuàng)新互聯(lián)

這篇文章主要介紹CSS定位position屬性示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司主營衢州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,衢州h5小程序定制開發(fā)搭建,衢州網(wǎng)站營銷推廣歡迎衢州等地區(qū)企業(yè)咨詢

首先，我們先寫一個(gè)HTML文件，利用css實(shí)現(xiàn)多行內(nèi)容垂直居中。

<div class="wrap">
    <div class="content">
    <h2>hello world</h2>
    <h3>HELLO WORLD</h3>
    <h4>層疊樣式表</h4>
    </div>
</div>

接下來我們使用css進(jìn)行布局排版：

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

position屬性：

一、靜態(tài)定位/常規(guī)定位/自然定位static

作用：使元素定位于自然流中

特點(diǎn)：

1、忽略top、bottom、left、right或者z-index聲明

2、兩個(gè)相鄰的元素如果都設(shè)置了外邊距，那么最終外邊距=兩者外邊距中大的

3、具有固定width和height值的元素，如果把左右外邊距設(shè)置為auto，則左右外邊距會自動擴(kuò)大到占滿剩余寬度，造成的效果就是這個(gè)塊水平居中

二、 相對定位relative

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

特點(diǎn)：

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

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

3、任何元素都可以設(shè)置為relative，它的絕對定位的后代都可以相對于它進(jìn)行絕對定位

4、可以使浮動元素發(fā)生偏移（解決兩個(gè)浮動元素設(shè)置t/r/b/l無效的問題），并控制它們的堆疊順序

三、絕對定位absolute

作用：使元素脫離自然流

特點(diǎn)：

1、脫離自然流

2、設(shè)置尺寸的百分比比的是最近可定位的祖先元素

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

4、如果沒有最近可定位祖先元素，會認(rèn)作為可定位祖先元素

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

四、 固定定位fixed

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

特點(diǎn)：

1、相對于瀏覽器視口定位

2、固定定位元素不會隨著視口滾動而滾動

3、繼承absolue的特點(diǎn)

利用position實(shí)現(xiàn)子元素垂直居中

<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屬性示例的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：CSS定位position屬性示例-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article40/cddeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、虛擬主機(jī)、標(biāo)簽優(yōu)化、云服務(wù)器、企業(yè)建站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營