CSS position 属性：绝对定位与相对定位，以及浮动

最新推荐文章于 2024-06-28 22:16:43 发布

xiaozaq

最新推荐文章于 2024-06-28 22:16:43 发布

阅读量7.1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xiaozaq/article/details/50532887

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以前一直很模糊定位原理，以为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样式，html加position: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>

xiaozaq

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
CSS position 属性：绝对定位与相对定位，以及浮动

可能的值：absolute，fixed，relative，static，static，inherit。值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。fixed
复制链接

扫一扫

专栏目录