css中怎么實現(xiàn)絕對定位-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)服務項目包括松陽網(wǎng)站建設、松陽網(wǎng)站制作、松陽網(wǎng)頁制作以及松陽網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，松陽網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到松陽省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

一.基本概念:

如果說相對定位沒有脫離文檔流，相對于對象本身進行偏移有點拖泥帶水的話，那么絕對定位絕對是快刀斬亂麻，因為絕對定位可以使一個對象脫離正常的文檔流，好像是漂浮在正常文檔流的上空,并相對于包含此對象的元素進行定位，當然這個定位相對元素在不同的情況下也有所不同。

二.如何將一個元素設置為絕對定位:

為對象添加如下屬性即可將對象設置為絕對定位:

代碼如下:

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).如果祖先元素中有采用定位的，那么此對象的相應方位的定位參考對象就是此祖先元素，如果祖先元素沒有采用定位的，那么相應方位的上的定位參考對象就是瀏覽器客戶區(qū)，代碼實例如下:

實例一:

代碼如下:

<!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。

實例二:

代碼如下:

以上代碼中，inner元素采用絕對定位，并且它的祖先元素沒有采用定位的，那么垂直方位的定位參考對象就是窗口，由于沒有設置left屬性值，那么水平方位的定位參考對象就是它的一級父元素children。

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

代碼如下:

<!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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設公司，的支持。

網(wǎng)頁標題：css中怎么實現(xiàn)絕對定位-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article44/ceeihe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、電子商務、網(wǎng)站排名、網(wǎng)站建設、網(wǎng)站內(nèi)鏈、網(wǎng)站設計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容