CSS中的定位——position属性

原创

mb638413918930b 2022-11-28 19:40:33 博主文章分类：Web前端 ©著作权

文章标签 CSS 定位 position属性 css html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者mb638413918930b的原创作品，请联系作者获取转载授权，否则将追究法律责任

CSS定位指的是改变元素在页面中的位置。

CSS定位机制：

普通流：元素按照其在HTML中的位置顺序决定排布的过程（也就是我不对元素进行定位的默认排布）

浮动

绝对布局

CSS定位包含的属性有：

属性	描述
position	把元素放在一个静态的、相对的、绝对的、或固定的位置中
top	元素向上的偏移量
left	元素向左的偏移量
right	元素向右的偏移量
bottom	元素向下的偏移量
overflow	设置元素溢出其区域发生的事情
clip	设置元素显示的形状
vertical-align	设置元素垂直对齐方式
z-index	设置元素的堆叠顺序

position 属性规定元素的定位类型。

CSS中的定位——position属性_html

（来源于：W3School http://www.w3school.com.cn/cssref/pr_class_position.asp )

特别地，需要理解abosulte的具体含义：相对于static定位以外的第一个父元素进行定位！

（以下部分解释来源于慕课网对CSS的学习）

（参考：详解css相对定位和绝对定位）

设置position:absolute（表示绝对定位）——>将元素从文档流拖出来（在文档流不占位置了），然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块（即相对于static定位以外的第一个父元素）进行绝对定位。如果不存在这样的包含块，则相对于html元素，即相对于浏览器窗口。

绝对定位的规律

1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

2.绝对定位的框从标准流中脱离，这意味着他们对其后的兄弟盒子的定位没有影响，其他的盒子好像就好像这个盒子不存在一样

相对定位的规律

1.使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置

2.使用相对定位的盒子仍在标准流中（会占据原来的位置），它对父亲和兄弟盒子都没有任何影响

设置position:fixed（表示固定定位）——>与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕的位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed; 属性功能相同。

文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。

有三种情况使得元素离开文档流而存在，分别是浮动绝对布局固定定位。

position:absolute和float 的脱离标准文档流一样么？或者说float有没有脱离

CSS中的定位——position属性_position属性_02

CSS中的定位——position属性_position属性_03

案例：

position01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" type="text/css" href="position01.css">
</head>
<body>
    <div id="position1"></div>
    <script>
        for(var i = 0; i < 100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

position01.css

#position1{
    width:100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 20px;
    top: 20px;
}

根据上述的取值分析，运行结果在Chrome显示如下：

CSS中的定位——position属性_css_04

定义 position: relative后div仍占据原本的位置（位置没有让出来）

修改position的值，为 position: abosulte，运行结果在Chrome显示如下：

CSS中的定位——position属性_定位_05

网页滑动后，显示过程如下（div随之滑动）：

CSS中的定位——position属性_css_06

此时的div不再占据原来的位置而是“让出”原来的位置。

修改position的值，为 position: fixed，运行结果在Chrome显示如下：

CSS中的定位——position属性_定位_05

运行结果似乎与 position: absolute时候木有什么区别。但是当我们滑动网页时，会发生：

CSS中的定位——position属性_html_08

div并不随网页的滑动而移动，也就是div是相对于浏览器窗口固定在left: 50px和top: 50px处，不随网页滑动的。

现在我们再修改一下 position01.html（增加一个 div）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" type="text/css" href="position01.css">
</head>
<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <script>
        for(var i = 0; i < 100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

position01.css

#position1{
    width:100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 30px;
    top: 30px;
}

#position2{
    width:100px;
    height: 100px;
    background-color: greenyellow;
    position: relative;
    left: 20px;
    top: 10px;
}

运行结果在Chrome显示如下：

CSS中的定位——position属性_定位_09