真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

.frame {
	margin: 0 auto;
	margin-top: 50px;
	width: 400px;
	height: 300px;
	background-color: yellow;
}
#div1 {
	width: 100px;
	height: 50px;
	background-color: blue;
}
#div2 {
	width: 200px;
	height: 100px;
	background-color: green;
}

當(dāng)我們給元素加上絕對定位的時候，元素會脫離當(dāng)前文檔流；

#div1 {
	position: absolute;
}

也就是說絕對定位的元素再文檔流中沒有位置，它從文檔流中脫離了出來，后面的元素會填充掉它原來的位置；

絕對定位的第二個特征在于定位位置相對于第一個具有定位屬性（即 position 為 relative 或者 absolute）的祖先元素；

#div1 {
	top: 30px;
}

當(dāng)給絕對定位元素設(shè)置定位值時，該元素會延著DOM樹向上查找，直到找到一個具有定位屬性的祖先元素，則定位相對于該元素，在該例子中，由于其祖先元素都沒有定位屬性，則該絕對定位元素會相對于body體進(jìn)行定位；如果給其父元素加上一個定位屬性，則該絕對定位元素會相對于這個父元素；

.frame {
	position: relative;
	/* 或者 position: absolute; */
}

絕對定位高級特性

絕對定位元素的第一個高級特性就是其具有自動伸縮的功能，當(dāng)我們將 width 設(shè)置為 auto 的時候（或者不設(shè)置，默認(rèn)為 auto ），絕對定位元素會根據(jù)其 left 和 right 自動伸縮其大?。? 注意：請牢記絕對定位元素的定位值是相對于第一個具有定位屬性的祖先元素）；

#div1 {
	width: auto;
	left: 100;
	right: 50px;
}

根據(jù)第一個高級特性，我們可以衍生出第二個高級特性，由于絕對行為元素具有自動伸縮的功能，如果 width 值為 auto 此時如果我們設(shè)置 left 和 right 都為0，則該元素會填充滿其相對的元素，如果此時我們將寬度設(shè)置為固定值，這是絕對定位元素會優(yōu)先取 left 值作為定位標(biāo)志（  這個標(biāo)準(zhǔn)適用于從左向右讀的文檔流中，而在少數(shù)從右往左讀的文檔流中，則優(yōu)先取 right）。如果這時我們將 margin 設(shè)置為 auto ，則絕對定位元素會呈現(xiàn)居中狀態(tài)；

#div1 {
	margin: auto;
	width: 100px;
	left: 0;
	right: 0;
}

其實(shí)并不一定非要設(shè)置成0，在 margin: auto 下，只要 left 和 right 的值相等，且不超過其  相對元素減去該絕對定位元素 width 的一半，就可以實(shí)現(xiàn)居中；如果其 left 超出了范圍，那么會取 left 的值作為定位（  從左向右的文檔流）；  /* 至于在范圍能的值不等情況，大家可以自行測試一下 */

以上例子均在水平方向?qū)崿F(xiàn)，那么垂直方向是怎么樣的呢？其實(shí)垂直方向的作用效果是一樣，垂直方向同樣可以自動拉伸，同理我們也可以實(shí)現(xiàn)垂直方向上的自動居中；

#div1 {
	top: 0;
	bottom: 0;
}

和水平居中有一點(diǎn)不同的是，無論 top 和 bottom 的值設(shè)置為多少，只要相等，就可以垂直居中。

以上是“CSS如何設(shè)置元素絕對定位”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！