position=absolute之相对父元素定位

最新推荐文章于 2020-08-11 09:44:06 发布

iteye_3352

最新推荐文章于 2020-08-11 09:44:06 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css position absolute 相对定位

本文链接：https://blog.youkuaiyun.com/iteye_3352/article/details/82541973

css 专栏收录该内容

32 篇文章

订阅专栏

本文详细解析了CSS中绝对定位与相对定位的使用方法及原理，并通过示例代码展示了如何实现元素的精确位置控制。

[color=green][b]1、问题：[/b][/color]

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

[color=green][b]2、答案[/b][/color]

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

[color=green][b]3、示例[/b][/color]


<html><head>
<style type="text/css">   
         .pre {
                    color:red;
         }
         .parent{             
                    position:relative;
                    left:0px;
                    top:0px;
                    margin:0;
                    padding:0;                
         }        
         h3.pos_abs{     
                    position:absolute;
                    left:0px;
                    top:0px;
                    margin:0;
                    padding:0;               
         }
</style>
   </head>
   <body>
    <p class='pre'>我没有被下面的元素覆盖</p>

    <div class="parent">
       <h5 class="pos_abs">
           我虽然使用了绝对定位，<br>
           但我的父元素的 position属性为 relative,<br>
           所以我仍然在下面
        </h5>
    </div>
</body></html>

[b]效果：[/b]

[img]http://dl2.iteye.com/upload/attachment/0099/3319/548e6e4a-d8a4-3530-9ce8-655a2094bdff.png[/img]

[b]分析：[/b]

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

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

[color=green][b]4、api参考[/b][/color]

下面是w3school的一段说明：
[img]http://dl2.iteye.com/upload/attachment/0089/7396/4cce43a0-a709-31a2-bf24-13d061585128.png[/img]

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

[color=green][b]5、原理[/b][/color]

绝对定位

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

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

[color=green][b]6、对比、拓展[/b][/color]

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

注意：
float 属性只控制左右移动。不控制上下移动。
也就是在当前位置的基础上向左, float:left ，或向右 float:right
而不会向上或向下调整位置。

[url]http://www.w3school.com.cn/css/css_positioning_floating.asp[/url]

[img]http://dl2.iteye.com/upload/attachment/0089/7599/3bedf610-1264-348b-93c9-7fea91d683db.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0089/7644/6248e7b7-61b5-33bf-8482-3429740a2701.gif[/img]
[img]http://dl2.iteye.com/upload/attachment/0089/7642/e2444b27-56d6-3837-9b66-329ddce6c16a.gif[/img]
[b]clear属性[/b]
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。（自己新起一行）
下面的例子中（右边第一个图），对段落二使用了clear:left
[img]http://dl2.iteye.com/upload/attachment/0089/7646/a297436e-ff43-3a9e-82c0-d6e1773f12c5.png[/img]

[color=blue]比较：[/color]

position = absolute 可以相对于position = relative 的父元素内任意定位。
而 float 则是控制元素左右滑动，具有对齐的效果。

[color=blue][b]注意：[/b][/color]
如果设置了 position = absolute，但是没有给其指定 left、right，或者是 top、bottom，
则元素的 left 和 top 会按 position = static 时计算。

这一点有时很有用。
比如 top 不指定，则 top 的值是动态按文档的相对位置分配的。

-

引用请注明
原文出处： http://lixh1986.iteye.com/blog/1948337

-