关于定位的问题
来源：2-11 汉克狗的腿和脚
XJian
2018-02-11 20:45:30
视频中汉克狗所有的身体部位都是相对<body>定位吗
2回答
-
你好，这里需要补充一点哦，absolute绝对定位，会导致元素脱离文档流。这里是相对于有定位的父级元素（这里的定位是除static 定位以外的）。如果父级没有定位，就会往上找（找父级的父级）定位元素，如果一直没有的话，就会一直往上找，一直没有的话，就会相对于浏览器窗口进行定位。
祝学习愉快~
0h018-02-14 -
慕慕6295533
2018-02-11
首先需要详细弄清楚一个概念，absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。什么意思？就是说，除非有static，那么设置absolute的元素就是相对他的第一父元素进行的相对定位。这里很容易弄混淆一种情况，也是我一开始弄不明白的：以为，absolute就是相对与body而言的绝对定位，！其实非也！ absolute是相对其直接父元素而言，仅此而已。
那么，回到这个例子，查看源代码，他是这样写的：
<body>
<div class="dog">
//省略其他同级别代码
<div class="body">
<div class="arm"></div>
<div class="arm right"></div>
<div class="leg">
<div class="foot"></div>
</div>
//省略其他同级别代码
</div>
</div>
也就是说，汉克狗所有的身体部位在在一个<div calss="dog">下绘制的，那么汉克狗所有的身体部位相对定位是相对这个div进行排版的，如果不用去掉这个div，直接将汉克狗所有的身体部位放在<body></body>中，那么汉克狗所有的身体部位就是相对于<body></body>进行设置的。
！你的问题的精髓就在于：弄清楚谁是直接父级元素，是<body></body>?还是自定义的div或者其他标签。
我写了一段代码，很清晰直观，你可以结合浏览器F12实践一下，实践是一件好事情。相信你在不会有困惑了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
width: 400px;
height: 400px;
position: absolute;
left: 50px;
top: 50px;
border: 5px solid red;
background-color: orange;
}
.inner{
width: 200px;
height: 200px;
position: absolute;
left: 50px;
top: 50px;
border: 5px solid red;
background-color: orange;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
0
相似问题