誰能解釋一下，為什么使用 relative是設(shè)置right,bottom 后，看不到div 呀，哪里多出來的 top , left 屬性負(fù)值呀？chrome 中修改后，同樣，設(shè)置 left,top 后， 多出來 right/bottom 的負(fù)值屬性？源碼：<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS?定位：relative?&&??absolute</title>
????<style>????????
????????.relative{????????????
????????????background-color:?#0f0;
????????????width:?100px;
????????????height:?100px;
????????????position:?relative;????????????
???????????right:?200px;
????????????bottom:?200px;
????????}????????
????</style>
</head>
<body>
????<div>
????????<div>
????????????<!--??-->
????????</div>
????</div>
</body>
</html><!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS?定位：relative?&&??absolute</title>
????<style>????????
????????.relative{????????????
????????????background-color:?#0f0;
????????????width:?100px;
????????????height:?100px;
????????????position:?relative;????????????
???????????left:?200px;
???????????top:?200px;
????????}????????
????</style>
</head>
<body>
????<div>
????????<div>
????????????<!--??-->
????????</div>
????</div>
</body>
</html>
5 回答
UFO2015
TA貢獻(xiàn)27條經(jīng)驗(yàn) 獲得超23個(gè)贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS?定位：relative?&&??absolute</title>
????<style>?
????????*{
????????????margin:?0;
????????????padding:?0;
????????}?
????????html,body{
????????????width:?100%;
????????????height:?100%;
????????????background:?rgba(0,0,0,0.3);
????????????color:?red;
????????????box-sizing:?border-box;
????????????overflow:?hidden;
????????}?
????????.box{
????????????width:?1000px;
????????????height:?600px;
????????????border:?1px?solid?red;
????????????/*overflow:?hidden;*/
????????}????
????????.box?.relative{????????????
????????????background-color:?#f0f;
????????????width:?100px;
????????????height:?100px;
????????????position:?relative;????????????
????????????right:?50px;
????????????bottom:?50px;
????????????/*
???????????? position:?relative;?瀏覽器，自動(dòng)補(bǔ)全?:
???????????? left?==?-right;
???????????? top?==?-bottom;?
????????????*/
????????}
????????.box?.relative-new{
????????????background-color:?#0f0;
????????????width:?100px;
????????????height:?100px;
????????????position:?relative;????????????
????????????right:?0;
????????????bottom:?0;
????????}???????
????</style>
</head>
<body>
????<div?class="box">
????????<div?class="relative">
????????????<h3>relative</h3>
????????</div>
????????<div?class="relative-new">
????????????<h3>relative-new</h3>
????????</div>
????</div>
</body>
</html>
UFO2015
TA貢獻(xiàn)27條經(jīng)驗(yàn) 獲得超23個(gè)贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS?定位：relative?&&??absolute</title>
????<style>?
???? *{
???? margin:?0;
???? padding:?0;
???? }?
???? html,body{
???? width:?100%;
???? height:?100%;
???? background:?rgba(0,0,0,0.3);
???? color:?red;
???? box-sizing:?border-box;
???? overflow:?hidden;
???? }?
???? .box{
???? width:?1000px;
???? height:?600px;
???? border:?1px?solid?red;
???? /*overflow:?hidden;*/
???? }????
????????.box?.relative{????????????
????????????background-color:?#0f0;
????????????width:?100px;
????????????height:?100px;
????????????position:?relative;????????????
????????????right:?100px;
????????????bottom:?100px;
????????????/*
????????????*/
????????}
????????.box?.relative-new{
???????? background-color:?#0f0;
????????????width:?100px;
????????????height:?100px;
????????????position:?relative;????????????
????????????left:?100px;
????????????top:?100px;
????????}
????????.box?.absolute{????????????
????????????background-color:?#0f0;
????????????width:?100px;
????????????height:?100px;
????????????position:?absolute;????????????
????????????right:?100px;
????????????bottom:?100px;
????????????/*
???????????? position:absolute;
???????????? right:?200px;
???????????? bottom:?200px;
???????????? 這樣才好使！
???????????? //position:absolute;?float脫離文檔流
????????????*/
????????}????????
????</style>
</head>
<body>
????<div?class="box">
????????<div?class="relative">
????????????<h3>relative</h3>
????????</div>
????????<div?class="relative-new">
????????????<h3>relative-new</h3>
????????</div>
????????<div?class="absolute">
???????? <h3>absolute</h3>
????????</div>
????</div>
</body>
</html>
qq_世界因你顫抖_0
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超0個(gè)贊
首先你應(yīng)該是沒有理解relative和position的意思，你在<style>里的那個(gè)“top”和“l(fā)eft”沒有意義。
relative相當(dāng)于定義一個(gè)容器，它是一個(gè)參照點(diǎn)。
position相當(dāng)于內(nèi)容，裝在容器里。
<style>
.box{
? ? ? ?width:100px;
? ? ? ?height:100px;
? ? ? ?background-color:#ff0000;
? ? ? ?position:absolute;
? ? ? ?left:200px;
? ? ? ?top:200px;
? ? ? ? ?}
</style>
<body>
<div class = "relative ">
? ?<div class = "position">
? ?</div>
</div>
</body>
另外附上慕課網(wǎng)絕對定位的學(xué)習(xí)課程，簡短易懂，http://idcbgp.cn/learn/95
添加回答
舉報(bào)
0/150
提交
取消