五种定位方法

zch2846

已于 2023-08-01 21:50:59 修改

阅读量130

点赞数

于 2023-08-01 21:03:48 首次发布

本文链接：https://blog.csdn.net/zch2846/article/details/132050636

版权

定位

文章目录

- 定位

1. position 属性

position定位，控制元素在网页中的位置，通过定位，结合盒子模型，可以写出复杂多变的网页布局，

有五个值

static ,(默认值) 静态定位
fixed,固定定位
relative ,相对定位
absolute ,绝对定位
sticky ,粘性定位

2. static (默认值)静态定位

HTML 元素默认情况下的定位方式为 static（静态）。静态定位设置left right top bottom不起作用。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。自上而下，自左而右依次排列。坐标系不生效。

3. fixed 固定定位(重点)

position: fixed; 的元素是相对于视口定位的，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动

元素定位设置为fixed之后，会有如下特性：

脱离文档流，因此不占据空间，别的元素感觉不到他的存在，会和其他元素重叠。
变成行内块级元素，宽高将自适应
坐标系生效，可以设置left right top bottom
若不设置left，top，他将停留在本应该出现的位置，别的元素也感觉不到他的存在，会和别的元素叠在一起（建议设置）

如果定位元素有margin，则从margin左上角开始计算

例子:

在这个例子中，只有具有 class=“fixed” 的 <div> 元素会固定定位：

 div.fixed {
            position: fixed;
            right: 30px;
            width: 300px;
            height: 200px;
            border: 3px solid darkred;
        }

注: 元素一旦脱离文档流，将具有如下属性：

不在占用正常的文档位置
正常布局的元素，将感觉不到他的存在，有可能会发生元素重叠

4. relative ,相对定位(重点)

position: relative; 的元素相对于其正常位置进行定位。相对元素本身的位置偏移。

元素定位设置为relative之后，会有如下特性：

坐标系生效，设置left right top bottom起作用
相对位置自己的原本位置
不脱离文档流。旧位置继续保留，新位置不占文档流（脱离文档流）。

例子:

 div.relative {
            position: relative;
            width: 300px;
            height: 200px;
            border: 3px solid darkred;
        }

效果图:

在这里插入图片描述

在上个代码中添加 top: 100px;使其改变位置

结果显示:

在这里插入图片描述

所以看出：元素定位设置为relative后，旧的位置继续保留，新位置不占文档流（脱离文档流）

5. absolute ,绝对定位(重点)

position: absolute; 的元素相对于最近的有定位的(相对、绝对、固定定位) 祖先元素进行定位。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

元素定位设置为absolute之后，会有如下特性：

变成行内块级元素
脱离文档流。
坐标系生效，设置left right top bottom起作用
若不设置left，top，他将停留在本应该出现的位置，别的元素也感觉不到他的存在，会和别的元素叠在一起（建议设置）
如果定位元素有margin，则从margin左上角开始计算

例子:

.grandparent {
            position: relative;
            height: 200px;
            width: 200px;
            background-color: blue;
        }

        .parent {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }

        .child {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

 <div class="grandparent">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>

结果演示：

在这里插入图片描述

绝对定位和相对定位使用

记住 子绝父相 这四个字

即：子元素使用绝对定位，父元素使用相对定位

因为：

父级盒子在布局时需要占有位置（如果不占有位置的话，会影响下面盒子的布局），因此父级元素要使用相对定位；

而子盒子不需要占有位置，可以放在父盒子里面的任何一个地方，不会影响其它的兄弟元素，则使用绝对定位。

使用绝对定位不会占有位置，而使用相对定位会占有位置

6. sticky ,粘性定位

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。

是一个结合relative相对定位和fixed固定定位于一体的特殊定位方式

例子：

在这个例子中，绿色的方块可以随着页面滚动，但在到达滚动位置时（距离页面顶部10px时）会停留在那里

  div.sticky {
            position: sticky;
            top: 10px;
            background-color: green;
            width: 100px;
            height: 100px;
        }