                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /初識(shí)HTML(5)+CSS(3)-升級(jí)版

絕對(duì)和相對(duì)的區(qū)別在哪里？相對(duì)布局并每有和絕對(duì)有太大區(qū)別，同時(shí)原來(lái)位置保留不動(dòng)還是不理解~

求破解，不懂

DoingSth

2015-02-03

源自：初識(shí)HTML(5)+CSS(3)-升級(jí)版 13-7

關(guān)注問(wèn)題我要回答

4157

操作

收起

3 回答

ToohoKing
2015-03-20

你的span標(biāo)簽應(yīng)該寫(xiě)在div標(biāo)簽外面

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Issa_Tan
2015-03-06

最大的區(qū)別：脫離文檔流與否的區(qū)別。

分別看下面 #div1 三種定位對(duì)跟隨在其后面的元素的影響：

static:

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>relative樣式</title>
<style?type="text/css">
div{border:1px?solid?green;}
#div1{
????width:200px;
????height:200px;
????border:2px?red?solid;
????background:pink;
}

</style>
</head>
<body>
	<div?id="div1"></div><div>偏移前的位置還保留不動(dòng)，覆蓋不了前面的div沒(méi)有偏移前的位置</div>
</body>
</html>

relative：

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>relative樣式</title>
<style?type="text/css">
div{border:1px?solid?green;}
#div1{
????width:200px;
????height:200px;
????border:2px?red?solid;
????top:10px;
????left:200px;
????position:relative;
????background:pink;
}

</style>
</head>
<body>
	<div?id="div1"></div><div>偏移前的位置還保留不動(dòng)，覆蓋不了前面的div沒(méi)有偏移前的位置</div>
</body>
</html>

absolute:

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>relative樣式</title>
<style?type="text/css">
div{border:1px?solid?green;}
#div1{
????width:200px;
????height:200px;
????border:2px?red?solid;
????top:10px;
????left:200px;
????position:absolute;
????background:pink;
}

</style>
</head>
<body>
	<div?id="div1"></div><div>偏移前的位置還保留不動(dòng)，覆蓋不了前面的div沒(méi)有偏移前的位置</div>
</body>
</html>

static 為默認(rèn)情況下的顯示

relative 并沒(méi)有使div1 脫離文檔流，所以它本來(lái)的位置還存在，占據(jù)了一定的空間，并且因?yàn)樵O(shè)置了position:relative; ，div1 擁有了z-index 屬性，所以它將會(huì)遮蓋住后面的div的內(nèi)容。

absolute 使div1 脫離了文檔流，因?yàn)闉g覽器先是讀取html，把他們按順序?qū)懭耄僮x取CSS 文件來(lái)控制html 的顯示，在讀取到positon:absolute 的時(shí)候，把<div1>抽出了文檔流，也就是本來(lái)是這樣的-----------<div1>---<div>----，被抽出文檔流后，變?yōu)?-------------<div>----，后面的元素將霸占元素<div1>的位置，而因?yàn)閜ositon:absolute ，div1 的z-index 屬性會(huì)遮蓋住后面的div的內(nèi)容。