CSS位置属性

如何使用positionCSS中的属性

定位使我们能够确定元素在屏幕上的显示位置以及显示方式。

您可以移动元素,然后将它们精确定位在所需的位置。

在这篇文章中,我还将根据元素之间的差异如何查看页面上的事物变化。position彼此互动。

我们有一个主要的CSS属性:position

它可以具有这5个值:

  • static
  • relative
  • absolute
  • fixed
  • sticky

静态定位

这是元素的默认值。静态定位的元素显示在常规页面流中。

相对定位

如果您设定position: relative现在,您可以使用属性在元素上以偏移量定位

  • 最佳
  • 正确的
  • 底部
  • 剩下

被称为偏移属性。他们接受长度值或百分比。

我在Codepen上制作的这个例子。我创建一个父容器,一个子容器以及一个带有一些文本的内部框:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</div>

使用一些CSS可以提供一些颜色和填充,但不会影响位置:

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
}

.child { background-color: #ff4797; padding: 30px; }

.box { background-color: #f3ff47; padding: 30px; border: 2px dotted #333; font-family: courier; text-align: center; font-size: 2rem; }

结果如下:

您可以尝试添加我之前提到的任何属性(toprightbottomleft) 到.box,什么也不会发生。该职位是static

现在,如果我们设置position: relative首先,显然没有任何变化。但是元素现在可以使用toprightbottomleft属性,现在您可以相对于包含它的元素更改它的位置。

例如:

.box {
  /* ... */
  position: relative;
  top: -60px;
}

的负值top将使盒子相对于容器向上移动。

或者

.box {
  /* ... */
  position: relative;
  top: -60px;
  left: 180px;
}

请注意,盒子所占据的空间是如何保留在容器中的,就像它仍然在原处一样。

现在可以使用的另一个属性是z-index更改z轴位置。我们稍后再讨论。

绝对定位

环境position: absolute在元素上将其从文档流中删除,并且将不再遵循页面定位流。

还记得相对定位时,我们是否注意到元素原来占据的空间被保留了,即使它被移动了吗?

有了绝对的定位,我们一经设定position: absolute.box,现在它的原始空间已折叠,只有原点(x,y坐标)保持不变。

.box {
  /* ... */
  position: absolute;
}

现在,我们可以使用toprightbottomleft特性:

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

或者

.box {
  /* ... */
  position: absolute;
  top: 140px;
  left: 50px;
}

坐标是相对于最近的容器,而不是static

这意味着如果我们添加position: relative.child元素,然后我们设置topleft设置为0,则该框将不会定位在窗户,而是将其定位在的0,0坐标处.child

.child {
  /* ... */
  position: relative;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

这是(我们已经看到的).child是静态的(默认):

.child {
  /* ... */
  position: static;
}

.box { /* … */ position: absolute; top: 0px; left: 0px; }

像相对定位一样,您可以使用z-index更改z轴位置。

固定位置

与绝对定位一样,在分配元素时position: fixed它已从页面流中删除。

绝对定位的区别在于:元素现在始终相对于窗口而不是第一个非静态容器相对于窗口定位。

.box {
  /* ... */
  position: fixed;
}

.box {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
}

另一个很大的不同是元素不受滚动影响。将粘性元素放置在某处后,滚动页面不会将其从页面的可见部分中删除。

粘性定位

尽管上述值已经存在很长时间了,但是这个值是最近才引入的,仍然相对不受支持(见caniuse.com

我想到的就是UITableView iOS组件position: sticky。您知道在滚动联系人列表并将第一个字母粘贴在顶部时,是否知道您正在查看该特定字母的联系人吗?

我们使用JavaScript进行了仿真,但这是CSS原生采用的方法。

免费下载我的CSS手册


更多CSS教程: