CSS position 属性:绝对定位与相对定位,以及浮动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaozaq/article/details/50532887

以前一直很模糊定位原理,以为absolute与relative必须配合使用,使用absolute必须父标签必须设置为relative。

可能的值:absolute,fixed,relative,static,static,inherit。

描述
absolute

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

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

最近才弄明白:

1.使用absolute属性的标签的父标签position值必须是absolute/fixed/relative/inherit(不能是继承static)中的一个。

2.left是相对于离自己最近的父辈容器,且已经relative|absolute|fixed。  margin-left也不一定是相对于父容器而言的,应该是作用于它在文档流的位置。比如有浮动效果时float属性时,可能margin-left就不是相对父容器而言了。

3.当父标签是body时,子标签设置position:absolute。position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定位,而初始包含块并不是以<html>或<body>进行定位的。

可以分别给div加样式的bottom:0px;然后看下效果,body加position:relative样式,htmlposition:relative样式。结果表示初始包含块并不是以<html>或<body>进行定位的。

<style type="text/css">
    html{
        border: 1px solid #ff4eb6;
        background-color: #b8eea5;

    }
    body{
        width:300px;
        height: 200px;
        margin: 10px auto;
        background-color: #eed2dc;
        border: 1px solid #0f0407;

    }
    div{
        width: 100px;
        height: 100px;
        background-color: #3ff;
        position: absolute;
        bottom:0;
    }
</style>


4.绝对定位标签对后面标签的位置影响,无影响,即后面标签的位置,就当绝对定位的标签不存在一样,只是可能会被绝对定位遮挡。

5.相对定位标签对后面标签的位置影响,只与相对标签的width,height,padding,margin的值有影响,与top,left,right,bottom值无关。即后面标签的位置,就当相对定位标签是static定位。不考虑他的top,left,right,bottom值。

6.浮动与绝对定位的区别。浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。

7.浮动div对后面标签的位置影响,不影响,只是会覆盖部分后面标签,标签对后面标签里的内容位置有影响,但是对后面标签的左上角坐标无影响。

ps:后面标签指的紧接着 绝对定位/相对定位/浮动标签 的下一个标签,都是只的默认标签,即position:static,并且无浮动。不是默认标签就按相应的规则计算标签位置。如position:relative就按默认位置,然后加上top,left等值移动后的位置。浮动就按浮动的规则。


<body>
<div style="position: relative; top: 20px;left: 20px;background-color: red;width: 400px;height: 400px;">
    <div style="position: absolute;width: 100px;height: 100px;background-color: white;left: 50px;">absolute</div>
    <div style="width: 200px;height: 200px;background-color: gray;">static</div>

</div>
<div style="background-color: #77ab35;width: 400px;height: 400px;">
    <div style="position: relative;width: 100px;height: 100px;background-color: white;left: 50px;">relative</div>
    <div style="width: 200px;height: 200px;background-color: gray;">static</div>
</div>


展开阅读全文

没有更多推荐了,返回首页