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).如果祖先元素中有采用定位的，那么此對象的相應方位的定位參考對象就是此祖先元素，如果祖先元素沒有采用定位的，那么相應方位的上的定位參考對象就是瀏覽器客戶區(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。
實例二:
<!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>
在以上代碼中，由于first元素脫離文檔流，所以second元素能夠占據原來first元素本來應該占據的位置。
相關文章
- 這篇文章主要為大家介紹了絕對定位元素被遮擋的解決方法,涉及使用css絕對定位的使用技巧,非常具有實用價值,需要的朋友可以參考下2014-12-13
- 絕對定位的元素left設為50%時，是已左上角為原點的，所以只要再使用margin屬性添加負值補償回來即可，下面示例代碼，需要的朋友可以參考下2014-09-04
- 當絕對定位元素的鄰近浮動元素的寬度大于父層寬度減3時，該絕對定位元素在ie6下面會隱藏，解決方法就是調整浮動元素的寬度，即寬度小于或等于父層寬度減32014-06-05
- 設置絕地定位的元素必須設置兩個相對定位的元素，也就是小A的紅色框框，和小C的藍色框框，設置他們的層級關系，下面有個示例，大家可以參考下2014-03-31
- 在某些時候可能需要將一個絕對定位的div在它的父對象中垂直居中對齊，可能用到的頻率不是太高，但是偶爾也會用到，下面就簡單介紹一下如何實現此功能2014-01-27
- 下面小編就為大家?guī)硪黄嘘P絕對定位的全面理解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-20