                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

adsolute生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。

这句话要怎么理解

下面这段代码相对于浏览器窗口进行定位没有设置top leaf属性 p标签位置发生了变化而a标签没被覆盖

<html>

<style>

p{position:absolute;}

</style>

<body>

<a href=“#”>skskdfja</a>

<p>段落元素由 p 标签定义。</p>

</body>

</html>

清风流光

2017-03-30

源自：初识HTML(5)+CSS(3)-升级版 13-6

关注问题我要回答

2418

操作

收起

2 回答

magic_4
2017-03-30

在没有设置绝对定位时多个<p>标签的内容是分段落显示这也正是<p>标签的功能

而设置绝对定位后，会把元素从文档流拖出来，独立出来，然后使用left right top bottom属性相对于最接近的一个有定位属性的父包含快进行绝对定位，不存在就相当于body 浏览器窗口。而默认的p标签是有上下margin的, 而对四个p标签绝对定位的时候, top和bottom是以p标签margin box的边缘为准的, 其父元素(.parent)的padding box上下边缘直接接触的是p的margin box的边缘.所以会造成四个P重叠（就是这四个p都脱离了文档流，然后设置样式相同就会重叠）