css教程之絕對(duì)定位使用詳解
我要評(píng)論一.基本概念:
如果說(shuō)相對(duì)定位沒(méi)有脫離文檔流，相對(duì)于對(duì)象本身進(jìn)行偏移有點(diǎn)拖泥帶水的話，那么絕對(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ì)象就是瀏覽器客戶區(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>
在以上代碼中，由于first元素脫離文檔流，所以second元素能夠占據(jù)原來(lái)first元素本來(lái)應(yīng)該占據(jù)的位置。
相關(guān)文章
- 這篇文章主要為大家介紹了絕對(duì)定位元素被遮擋的解決方法,涉及使用css絕對(duì)定位的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-13
CSS絕對(duì)定位元素left設(shè)為50%實(shí)現(xiàn)水平居中
絕對(duì)定位的元素left設(shè)為50%時(shí)，是已左上角為原點(diǎn)的，所以只要再使用margin屬性添加負(fù)值補(bǔ)償回來(lái)即可，下面示例代碼，需要的朋友可以參考下2014-09-04絕對(duì)定位的元素在ie6下不顯示隱藏了的有效解決方法
當(dāng)絕對(duì)定位元素的鄰近浮動(dòng)元素的寬度大于父層寬度減3時(shí)，該絕對(duì)定位元素在ie6下面會(huì)隱藏，解決方法就是調(diào)整浮動(dòng)元素的寬度，即寬度小于或等于父層寬度減32014-06-05IE7中絕對(duì)定位元素之間的遮蓋問(wèn)題示例探討
設(shè)置絕地定位的元素必須設(shè)置兩個(gè)相對(duì)定位的元素，也就是小A的紅色框框，和小C的藍(lán)色框框，設(shè)置他們的層級(jí)關(guān)系，下面有個(gè)示例，大家可以參考下2014-03-31將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能2014-01-27- 下面小編就為大家?guī)?lái)一篇有關(guān)絕對(duì)定位的全面理解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-20