CSS定位

liro
122 阅读2分钟

1.定位的引入

标准流和浮动在一些布局中还有欠缺，定位可以帮助我们更好的实现页面布局，将元素摆在我们想要的位置上，定位由两部分组成：

  1. 定位模式: position: relative;
  2. 边偏移量: top(bottom/left/right): 10px;

2.四种定位模式

静态定位：

静态定位是默认的模式，即为没有定位，按照标准流的显示，代码如下：

position: static;

此定位几乎不使用。

相对定位：

相对定位是指元素相对自己原本的文档流位置进行偏移定位，虽然进行偏移，但是仍保留原本的文档流位置，即不脱标：

position: relative;

相对定位需要理解的是“相对”：相对指的是元素本身原来的文档流位置，而非相对父元素；我们建立一个坐标来理解：

image.png 相对其他的方位偏移也是同理。

绝对定位：

position: absoulate;

绝对定位是将一种元素从文档流中移除，并根据其最近的一已定位的祖先元素（position属性不为static）进行定位的一种布局方式。所以绝对定位会脱离标准流，空出原本文档流的位置，在之前的相对定位条件下，我们在实际开发中使用“子绝父相”：子元素使用绝对定位，父元素使用相对定位，可以将子元素限制在父元素的文档流内部，从而使我们更好的控制页面布局。

固定定位：

position: fixed;

顾名思义，固定定位就是针对一些位置保持不变的元素而设定的：比如一些侧边栏、广告栏等等，让其固定在显示窗口的某个区域，不参与页面的前后布局，只与显示窗口有关。

粘性定位：

position: sticky;

对于粘性定位，它的边偏移量的意义是：当此元素移动到距离某个边一定偏移量时，变为固定定位。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位的应用</title>
    <style>
        .d {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .sticky {
            width: 300px;
            height: 300px;
            background-color: red;
            position: sticky;
            top: 50px
        }
    </style>
</head>

<body>
    <div class="d">s</div>
    <div class="sticky"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
</body>

</html>

当红色的盒子距离页面顶部50像素时，这个盒子不再参与页面的移动，变为固定定位。

定位叠放次序：

当存在多个同级盒子有定位时，可能会因为CSS代码的先后顺序出现覆盖的情况，如果希望元素以一定的层级显示，可以设置叠放次序：

z-index: 1;

后面的数字默认都为0，数字越高，显示的优先级越高，这样就可以把一些特殊的元素放在最上层。

avatar
文章
阅读
粉丝