溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“HTML絕對定位的參考點及注意事項有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
一、絕對定位參考點
1.規(guī)律：
（1）默認情況下所有的絕對定位的元素，無論有沒有祖先元素，都會以body作為參考點。
<style>
.box1{
width: 300px;
height: 300px;
background-color: red;
/*position:absolute;*/
/*left:0px;*/
/*bottom:0px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>（2）如果有一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，那么這個絕對定位的元素就會以定位流的那個祖先元素為參考點。
.box1{
width: 300px;
height: 300px;
background-color: red;
position:absolute;
left:0px;
bottom:0px;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left:0px;
top:0px;
}注意點：i.只要是這個絕對定位元素的祖先元素都可以。ii.指的定位流是指絕對定位/相對定位/固定定位，定位流中只有靜態(tài)定位是不行的。
（3）如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多個元素都是定位流，那么這個絕對定位的元素會以離它最近的祖先元素作為參考點。
.......上面的代碼不變..........
.box3{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
right:0px;
bottom:0px;
}
.........省略代碼.......
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>二、絕對定位的注意點
（1）如果一個絕對定位的元素是以body作為參考點，那么其實是以網(wǎng)頁首屏的寬度和高度作為參考點的，而不是以整個網(wǎng)頁的寬度和高度作為參考點的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D152_LimeLightOfAbsolutePosition</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
bottom:0px;
right:0px;
?
}
.box2{
width: 2000px;
height: 100px;
background-color: blue;
position:
}
.box3{
width: 200px;
height: 2000px;
background-color: black;
?
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>（2）一個絕對定位的元素會忽略祖先元素的padding屬性。
.box4{
height: 300px;
width: 300px;
background-color: yellow;
padding:50px;
/*position:absolute;*/
/*boder:20px black ;*/
}
.box5{
height: 100px;
width: 100px;
background-color: red;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div class="box4">
<div class="box5"></div>
</div>“HTML絕對定位的參考點及注意事項有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
