建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
絕對(duì)定位是CSS中的一種定位方式，它允許我們精確地控制元素在頁(yè)面上的位置，絕對(duì)定位的元素不會(huì)影響其他元素的布局，也不會(huì)被其他元素覆蓋，我們可以使用top、left、right、bottom等屬性來(lái)設(shè)置元素的絕對(duì)位置。
成都創(chuàng)新互聯(lián)，專(zhuān)注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站制作、響應(yīng)式網(wǎng)站設(shè)計(jì)、展示型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)等服務(wù)，幫助中小企業(yè)通過(guò)網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷(xiāo)推廣問(wèn)題。
我們需要了解的是，絕對(duì)定位的元素的位置相對(duì)于最近的已定位的祖先元素（即設(shè)置了position屬性的元素），如果沒(méi)有已定位的祖先元素，那么它的位置將相對(duì)于初始包含塊。
接下來(lái)，我們來(lái)看看如何使用top和left屬性來(lái)設(shè)置絕對(duì)定位元素的絕對(duì)位置。
1. top屬性：這個(gè)屬性用于設(shè)置元素距離其最近的定位祖先元素的上邊緣的距離，它的值可以是像素（px）、百分比（%）或者em，我們可以這樣設(shè)置一個(gè)元素的top屬性：
.element {
position: absolute;
top: 20px;
}
在這個(gè)例子中，.element元素將被定位在其包含塊的頂部邊緣上方20像素的位置。
2. left屬性：這個(gè)屬性用于設(shè)置元素距離其最近的定位祖先元素的左邊緣的距離，它的值也可以是像素（px）、百分比（%）或者em，我們可以這樣設(shè)置一個(gè)元素的left屬性：
.element {
position: absolute;
left: 30%;
}
在這個(gè)例子中，.element元素將被定位在其包含塊的左側(cè)邊緣的30%，left屬性只對(duì)塊級(jí)元素和內(nèi)聯(lián)塊元素有效，對(duì)行內(nèi)元素?zé)o效。
除了top和left，我們還可以使用right和bottom屬性來(lái)設(shè)置元素的右邊緣和下邊緣的位置，這些屬性的值同樣是像素（px）、百分比（%）或者em，我們可以這樣設(shè)置一個(gè)元素的right和bottom屬性：
.element {
position: absolute;
right: 10%;
bottom: 50px;
}
在這個(gè)例子中，.element元素將被定位在其包含塊的右側(cè)邊緣的10%和底部邊緣的50像素的位置。
絕對(duì)定位是一種非常強(qiáng)大的定位方式，它可以讓我們精確地控制元素的位置，由于它的位置相對(duì)于最近的已定位的祖先元素，所以我們需要確保我們的布局設(shè)計(jì)是基于這種相對(duì)位置的，如果我們的設(shè)計(jì)需要基于絕對(duì)的像素位置，那么我們可能需要使用其他的布局方式，如浮動(dòng)或固定定位。
標(biāo)題名稱(chēng)：div的絕對(duì)定位
文章分享：http://www.dlmjj.cn/article/dhjehog.html
