溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css中如何實現絕對定位”，在日常操作中，相信很多人在css中如何實現絕對定位問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css中如何實現絕對定位”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一.基本概念:
如果說相對定位沒有脫離文檔流，相對于對象本身進行偏移有點拖泥帶水的話，那么絕對定位絕對是快刀斬亂麻，因為絕對定位可以使一個對象脫離正常的文檔流，好像是漂浮在正常文檔流的上空,并相對于包含此對象的元素進行定位，當然這個定位相對元素在不同的情況下也有所不同。
二.如何將一個元素設置為絕對定位:
為對象添加如下屬性即可將對象設置為絕對定位:
代碼如下:
position:absolute;
或者
代碼如下:
position:fixed
三.定位參考對象:
可以使用top屬性和left屬性設置絕對定位對象的偏移量。
絕對定位雖然脫離了文檔流，但是也需要有定位的參考對象，不過在不同的情況下參考對象也是不同。
1.如果沒有設置top或者left屬性值，那么相應方位的定位參考對象就是此對象的一級父元素，代碼實例如下:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對定位-螞蟻部落</title>
<style type="text/css">
body
{
margin:20px;
}
#grandfather
{
width:330px;
height:300px;
background-color:#F90;
}
#father
{
width:200px;
height:200px;
background-color:green;
margin-left:50px;
}
#children
{
width:100px;
height:100px;
background-color:red;
float:right;
}
#inner
{
width:50px;
height:50px;
background-color:blue;
position:absolute;
top:10px;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="children">
<div id="inner"></div>
</div>
</div>
</div>
</body>
</html>
以上代碼中，由于inner元素采用絕對定位，并且沒有設置left屬性值，所以在水平方位的定位參考對象就是inner元素的一級父元素children。當然如果沒有設置top屬性值，那么垂直方位的定位參考對象也是children。
2.如果設置了left或者top屬性值情況:
1).如果祖先元素中有采用定位的，那么此對象的相應方位的定位參考對象就是此祖先元素，如果祖先元素沒有采用定位的，那么相應方位的上的定位參考對象就是瀏覽器客戶區，代碼實例如下:
實例一:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對定位-螞蟻部落</title>
<style type="text/css">
body
{
margin:20px;
}
#grandfather
{
width:330px;
height:300px;
background-color:#F90;
}
#father
{
width:200px;
height:200px;
background-color:green;
margin-left:50px;
position:relative;
}
#children
{
width:100px;
height:100px;
background-color:red;
float:right;
}
#inner
{
width:50px;
height:50px;
background-color:blue;
position:absolute;
left:10px;
top:10px;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="children">
<div id="inner"></div>
</div>
</div>
</div>
</body>
</html>
以上代碼，inner元素采用絕對定位，并且它的祖先元素father采用相對定位，那么它的定位參考對象就是father。
實例二:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對定位-螞蟻部落</title>
<style type="text/css">
body
{
margin:20px;
}
#grandfather
{
width:330px;
height:300px;
background-color:#F90;
}
#father
{
width:200px;
height:200px;
background-color:green;
margin-left:50px;
}
#children
{
width:100px;
height:100px;
background-color:red;
float:right;
}
#inner
{
width:50px;
height:50px;
background-color:blue;
position:absolute;
top:10px;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="children">
<div id="inner"></div>
</div>
</div>
</div>
</body>
</html>
以上代碼中，inner元素采用絕對定位，并且它的祖先元素沒有采用定位的，那么垂直方位的定位參考對象就是窗口，由于沒有設置left屬性值，那么水平方位的定位參考對象就是它的一級父元素children。
四.絕對定位元素脫離文檔流:
在開頭已經提到過，絕對定位能夠使元素脫離文檔流，那么它周邊文檔流中的元素就能夠占據此元素沒有脫離文檔流時的位置。
代碼實例如下:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對定位-螞蟻部落</title>
<style type="text/css">
div
{
text-align:center;
line-height:100px;
}
.father
{
width:400px;
height:400px;
background-color:green;
margin:50px;
}
.first
{
width:100px;
height:100px;
background-color:red;
position:absolute;
}
.second
{
width:120px;
height:120px;
background-color:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="first">first</div>
<div class="second">second</div>
</div>
</body>
</html>
到此，關于“css中如何實現絕對定位”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
