CSS定位position屬性的示例分析

這篇文章主要為大家展示了“CSS定位position屬性的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS定位position屬性的示例分析”這篇文章吧。

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

　　<divclass="wrap">

　　<divclass="content">

　　<h2>helloworld</h2>

　　<h3>HELLOWORLD</h3>

　　<h4>層疊樣式表</h4>

　　</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實現子元素垂直居中

　　<divclass="wrap">

　　<divclass=""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:autoauto;

　　}

以上是“CSS定位position屬性的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！