CSS 定位 relative && absolute 问题？
谁能解释一下，为什么使用 relative是设置right,bottom 后，看不到div 呀，哪里多出来的 top , left 属性负值呀？
chrome 中修改后，
同样，设置 left,top 后， 多出来 right/bottom 的负值属性？
源码：
<!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>
UFO2015浏览 2180回答 5
5回答
-
UFO2015
<!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; 浏览器，自动补全 : 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
<!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
首先你应该是没有理解relative和position的意思，你在<style>里的那个“top”和“left”没有意义。relative相当于定义一个容器，它是一个参照点。position相当于内容，装在容器里。<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>另外附上慕课网绝对定位的学习课程，简短易懂，http://www.imooc.com/learn/95
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5