CSS之position=absolute之相对父元素定位

最新推荐文章于 2023-05-26 23:12:28 发布

iteye_5729

最新推荐文章于 2023-05-26 23:12:28 发布

阅读量792

点赞数 1

文章标签： css 绝对定义

本文链接：https://blog.csdn.net/iteye_5729/article/details/82553544

版权

1、问题：

如果 position : absolute ，如何又相对定位？
就是相对父元素，的绝对定位。

2、答案

当父元素的 position 设为 relative 时，
其子元素的 absolute position 是按照父元素的相对位置来的

3、示例

<html><head>
         <style type="text/css">
         h2.pos_abs{     position:absolute;
                         left:0px;
                         top:0px;
                         margin:0;padding:0;
                
         }
         .a{             position:relative;
                         left:0px;
                         top:0px;
                         width:400px;
                         margin:0;padding:0;                
         }</style>
   </head>
   <body>
    <p>通过绝对定位，元素可以放置到页面上的任何位置。</p>
    <div class="a">
       <h2 class="pos_abs">这是带有绝对定位的标题</h2>
    </div>
</body></html>

效果：

分析：

h2标题的 class 属性，position设为 absolute ，其 top = left = 0 ，
如果没有父元素，它应该显示在页面最左上角，覆盖掉 p 的内容。

实际，由于它的父元素的 position 设置为 relative，排在了 p 的下面，所以它的绝对位置，是相对于父元素的位置的。故：显示在 p 的下方。

4、api参考

下面是w3school的一段说明：

absolute：相对于 static 定位以外的第一个父元素进行定位。
也就是父元素的position取值可以是：absolute fixed relative inherit
显然，最可能和常用的取值是 relative

5、原理

绝对定位

绝对定位使元素在文档流中不占据任何空间。
（文档流中的其它元素的布局就像绝对定位的元素不存在一样）。

这一点与相对定位不同，相对定位的元素实际上被看作普通流定位模型的一部分，
它占据普通流中的空间，也会影响到普通流中其它元素的布局。

6、对比、拓展

float
css 另外一个属性 float 也会使元素脱离文档流，不占据普通流中的空间。

http://www.w3school.com.cn/css/css_positioning_floating.asp

clear属性
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。（自己新起一行）
下面的例子中（右边第一个图），对段落二使用了clear:left

比较：

position = absolute ;其实是 float 的一个特例。
是规定了 top 和 left 的 float.