定位—CSS学习笔记

龙二_
83 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

前言

也许你对正常的文档流中的默认的定位不是很满意，想使其脱离正常的文档流，本篇文章将会介绍定位的CSS技术来解决这个问题。但在这之前，我们再复习一下正常文档流是什么。

正常文档流

正常文档流又称普通文档流或普通流。

它的定义是：把页面分为一行一行的，其中块元素单独占一行，相邻的行内元素从左到右排成一行直到该行排满。

正常文档流就是页面默认元素的布局。想要使其脱离正常的文档流，除了上文提到的浮动外，还有定位。

定位

什么是定位

定位的想法是允许去覆盖正常文档流的默认行为。它可以使布局中一些元素的位置变动，甚至使一些元素浮动在其他部分顶部或始终固定在页面中的某个位置。但有许多不同种类型的定位可以对html元素生效，可通过position属性来实现。

定位的种类

静态定位

静态定位是每个元素position获取的默认值，它只是将元素放入它在文档布局流中的正常位置 。

可以尝试在正常文档流的html元素中加入position:static的css语句，最终看到与原来效果一致。

<body>
    <style>
        .normalBox {
            width: 400px;
            height: 100px;
            border: 2px solid black;
            position: static;
            margin-top: 20px;
        }
        .relativeBox {
            width: 400px;
            height: 100px;
            border: 2px solid black;
            margin-top: 20px;
        }
        .absoluteBox {
            width: 400px;
            height: 100px;
            border: 2px solid black;
            margin-top: 20px;
        }
    </style>
    <h1>position</h1>
    <div class="container">
    <div class="normalBox">
        <p>This is a static box.</p>
    </div>
    <div class="relativeBox">
        <p>This is a relative box.</p>
    </div>
    <div class="absoluteBox">
        <p>This is a absolute box.</p>
    </div>
    </div>
</body>

效果：

image.png

相对定位

相对定位是相对自己原本在正常文档流中的位置进行位置的变动。位置的变动是通过top, bottom, left和 right设定大小来精确指定要将定位元素移动到的位置。

注意这里的top, bottom, left和 right指定大小后不是向上、向下移动多少距离，而是向其相反反向移动。比如说设定top:20px是相对上方向推开20像素的距离，其他同理。

我们来试验一下，在上例的relativeBox的类中添加如下语句

.relativeBox {
   position:relative;
   top:30px;
   left:30px
}

可以看到下图盒子向下、向右移动了30像素，并且不会影响正常布局的元素（覆盖）

image.png

绝对定位

绝对定位的元素比较特殊，它不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。我们删除上例对relativeBox的类的更改，往absoluteBox类下添加一个相同的盒子，并对其添加如下语句

.absolute{
    position:absolute;
    top:30px;
    left:30px;
}

效果：

image.png

可以看到绝对定位的元素不再存在于正常文档流中（相当于处于正常文档流中的元素可以无视它），所以原本处于relative box下的absolute box直接移到了距body右下30像素的位置，而原本处于其下的则顶到正常流的位置。

定位上下文

绝对定位的元素的参考元素应该是哪个元素？这取决于绝对定位元素的父元素的 position 属性。

如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在元素的外面，并且根据浏览器视口来定位。

绝对定位元素在 HTML 源代码中，是被放在中的，也就是相对来定位（作为参考元素）。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。

为了演示这一点，将以下语句添加到上例的container类中：

position: relative;

应该得到以下结果：

image.png

现在就是相对于直接父元素container来定位了

z-index更改堆叠顺序

由于脱离正常文档流，绝对定位的元素会存在与其他元素重叠的可能。这个时候会需要改变堆叠的顺序来决定谁处于顶部。我们通过上例来尝试 一下，先将各个盒子都添加上背景颜色（比较容易看出堆叠的顺序）。

image.png

可以看出现在绝对定位元素是在它们上面。

没有使用 z-index 的时候，元素的层叠关系由2个因素决定：

  1. 该元素的position是否是static，如果是static（等同于没有设置 position，因为 static 就是默认值）那么这个元素就称为 non-positioned ；反之，如果 position 值是 relative, absolute, fixed, 或 sticky 则称 positioned。 positioned 元素享受特权，会覆盖 non-positioned 元素。而且只有positioned 元素设置z-index才有效。 而 non-positioned 元素中，有 float样式的元素覆盖 没有float 的。
  2. 元素的“出场”顺序 —— 即在html中的顺序，同类型元素遵循后来者居上的原则。

现在我们将绝对定位元素添加一个z-index:-1;

z-index 只接受无单位索引值，值越大越顶层

image.png

固定定位

最后一种类型的定位position:fixed;这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身。这种定位在布置导航栏时是十分有效的。

avatar
文章
阅读
粉丝