61,112
社区成员
发帖
与我相关
我的任务
分享关于定位的疑问
为什么son1看起来像是参照f2定位的？son1 距离页面顶端也有30px
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Test2</title>
<style type="text/css">
#f1 {
background-color: #b6ff00;
}
#son1 {
position: absolute;
background-color: green;
height:40px;
}
#f2 {
margin-top: 30px;
height: 161px;
background-color: red;
}
</style>
</head>
<body>
<div id="top">
<div id="f1">
<div id="son1">son1</div>
</div>
<div id="f2">
ddddddddddd
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
lanselixiang 2012-12-07
- 打赏
- 举报
这问题是基础问题，你只要理解 position: absolute与 position: relative的区别，基本是配合用的。
复杂的定位是fixed，这个是浏览器不兼容。
主要看什么效果。
xyunsh 2012-11-30
- 打赏
- 举报
谢谢。我不是不知道正确的情况。
只是想明白为啥会这样
xyunsh 2012-11-30
- 打赏
- 举报
那son1应该是相对HTML元素来定位，HTML元素是在顶部，那son1也应该是顶部啊？
碧海情天-赵亮 2012-11-30
- 打赏
- 举报
因为son1是position: absolute;的,脱离了文档流.无论它有多大面积,都不会计入f1的内容面积里去.而f1中除了这个对象之外没有其它内容,所以计算的结果就是零高度,因此看上去就和下面的f2等高了,所以son1似乎是相对f2定位.
如果你在你原来的代码里给f1增加一个点行内内容,如
<div id="f1">xxxx
<div id="son1">son1</div>
</div>
就能看到f1自动根据内容而得到一个高度,和f2区分开来了.
xyunsh 2012-11-30
- 打赏
- 举报
any answer?
__phoenix 2012-11-29
- 打赏
- 举报
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Test2</title>
<style type="text/css">
#f1 {
background-color: #b6ff00;
height:100px;
}
#son1 {
position: absolute;
top:30px;
left:100px;
background-color: green;
float:left;
height:40px;
}
#f2 {
margin-top: 30px;
height: 161px;
background-color: red;
}
</style>
</head>
<body>
<div id="top">
<div id="f1">
<div id="son1">son1</div>
</div>
<div id="f2">
ddddddddddd
</div>
</div>
</body>
</html>
多写一些代码就明白了
xyunsh 2012-11-29
- 打赏
- 举报
any answer?
