溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

css中怎么實(shí)現(xiàn)絕對(duì)定位

發(fā)布時(shí)間：2021-07-09 16:42:25 來(lái)源：億速云 閱讀：117 作者：Leah 欄目：web開(kāi)發(fā)

css中怎么實(shí)現(xiàn)絕對(duì)定位，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

一.基本概念:

如果說(shuō)相對(duì)定位沒(méi)有脫離文檔流，相對(duì)于對(duì)象本身進(jìn)行偏移有點(diǎn)拖泥帶水的話(huà)，那么絕對(duì)定位絕對(duì)是快刀斬亂麻，因?yàn)榻^對(duì)定位可以使一個(gè)對(duì)象脫離正常的文檔流，好像是漂浮在正常文檔流的上空,并相對(duì)于包含此對(duì)象的元素進(jìn)行定位，當(dāng)然這個(gè)定位相對(duì)元素在不同的情況下也有所不同。

二.如何將一個(gè)元素設(shè)置為絕對(duì)定位:

為對(duì)象添加如下屬性即可將對(duì)象設(shè)置為絕對(duì)定位:

代碼如下:


position:absolute;


或者

代碼如下:


position:fixed

三.定位參考對(duì)象:

可以使用top屬性和left屬性設(shè)置絕對(duì)定位對(duì)象的偏移量。
絕對(duì)定位雖然脫離了文檔流，但是也需要有定位的參考對(duì)象，不過(guò)在不同的情況下參考對(duì)象也是不同。

1.如果沒(méi)有設(shè)置top或者left屬性值，那么相應(yīng)方位的定位參考對(duì)象就是此對(duì)象的一級(jí)父元素，代碼實(shí)例如下:

代碼如下:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對(duì)定位-螞蟻部落</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元素采用絕對(duì)定位，并且沒(méi)有設(shè)置left屬性值，所以在水平方位的定位參考對(duì)象就是inner元素的一級(jí)父元素children。當(dāng)然如果沒(méi)有設(shè)置top屬性值，那么垂直方位的定位參考對(duì)象也是children。
2.如果設(shè)置了left或者top屬性值情況:
1).如果祖先元素中有采用定位的，那么此對(duì)象的相應(yīng)方位的定位參考對(duì)象就是此祖先元素，如果祖先元素沒(méi)有采用定位的，那么相應(yīng)方位的上的定位參考對(duì)象就是瀏覽器客戶(hù)區(qū)，代碼實(shí)例如下:

實(shí)例一:

代碼如下:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對(duì)定位-螞蟻部落</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元素采用絕對(duì)定位，并且它的祖先元素father采用相對(duì)定位，那么它的定位參考對(duì)象就是father。

實(shí)例二:

代碼如下:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對(duì)定位-螞蟻部落</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元素采用絕對(duì)定位，并且它的祖先元素沒(méi)有采用定位的，那么垂直方位的定位參考對(duì)象就是窗口，由于沒(méi)有設(shè)置left屬性值，那么水平方位的定位參考對(duì)象就是它的一級(jí)父元素children。

四.絕對(duì)定位元素脫離文檔流:
在開(kāi)頭已經(jīng)提到過(guò)，絕對(duì)定位能夠使元素脫離文檔流，那么它周邊文檔流中的元素就能夠占據(jù)此元素沒(méi)有脫離文檔流時(shí)的位置。
代碼實(shí)例如下:

代碼如下:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>CSS的絕對(duì)定位-螞蟻部落</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>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手