Question

CSS position 属性

position属性的absolute值：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 能给解释下这句话吗？

Answer 1

    你好，首先先看一下代码：

    效果如下：

    

    这个是默认的样式，也就是两个div都是static的状态所显示的样子。那么接下来给子级div设置position样式，修改的代码如下：

    

    这里只是修改了子级的样式，这也就是为了显式的表现你的要求（父级的div也就是你说的父元素），而父元素的样式没有改变。

    效果如下：

    那么在这里，只是修改了子元素的样式，所以子级div也就是相当于父级的div发生了位置的改变。也就是你说的那个意思：相对于 static 定位以外的第一个父元素进行定位。

    希望能帮到你。望采纳。

Answer 2

absolute定位将对象从文档流中拖出,使用left,right,top,bottom 等属性定位
“相对于 static 定位以外的第一个父元素进行定位”的理解注意一下绩点即可：
1、相对于父辈元素定位，可能是爸爸或者爷爷或者太爷爷
2、这个父辈元素要求有定位（“static 即常规定位以外”），比如relative或者absolute。
3、如果不存在这样的父对象,则依据body对象定位。

不知是否理解。其实一楼举得例子不错，但是还是没有到位，其实那个例子中的child元素师相对于body定位的，而不是main。比如你给那个例子中的main加个margin:150px;属性，看看效果。

Answer 3

我说个通俗易懂的解释：
例如你现在有个div设置了absolute，或者relative。如果叫他为儿子的话，他就会往外层找，找父级，如果父级没设置position（absolute,relative,fixed），那么继续往上找，找爷爷级。。。。一直找到有position的，就根据他来定位。
多写几个demo试试就知道了。

Answer 4

CSS的Position属性及其使用