跳到主要内容

CSS 中的定位

static 定位​

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

固定定位 fixed​

固定定位不如其他定位类型用得普遍，但它是最好理解的一种定位类型，因此我先从它开始介绍。给一个元素设置 position: fixed 就能将元素放在视口的任意位置。这需要搭配四种属性一起使用：top、right、bottom 和 left。这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。比如，top: 3em 表示元素的上边缘距离视口顶部 3em。

设置这四个值还隐式地定义了元素的宽高。比如指定 left: 2em; right: 2em 表示元素的左边缘距离视口左边 2em，右边缘距离视口右边 2em。因此元素的宽度等于视口总宽度减去 4em。top、bottom 和视口高度也是这样的关系。

控制定位元素的大小​

定位一个元素时，不要求指定四个方向的值，可以只指定需要的方向值，然后用 width 和 / 或 height 来决定它的大小，也可以让元素本身来决定大小。请看如下声明

.box {
  position: fixed; 
  top: 1em; 
  right: 1em; 
  width: 20%
}

这段代码会将元素放在距离视口顶部和右边 1em 的位置，宽度为视口宽度的 20%。它省略了 bottom 和 height 属性，元素的高度由自身的内容决定。例如，这可以用于将一个导航菜单固定到屏幕上。即使用户滚动网页内容，该元素的位置也不会改变。

因为固定元素从文档流中移除了，所以它不再影响页面其他元素的位置。别的元素会跟随正常文档流，就像固定元素不存在一样。也就是说它们通常会在固定元素下面排列，视觉上被遮挡。这对于模态框来说没问题，因为我们希望模态框出现在最前面的中间位置，直到用户关闭它

而对于其他固定元素，比如侧边导航栏，就需要注意不要让其他内容出现在它下面。通常给其他内容加一个外边距就能解决该问题。比如，将所有内容放在容器里，容器设置 margin-right: 20%。外边距会流到固定元素下面，内容就不会跟导航栏重叠。

绝对定位 absolute​

就是 position: absolute;

固定定位让元素相对视口定位，此时视口被称作元素的包含块（containing block）。声明 left: 2em 则将定位元素的左边放在距包含块左侧 2em 处。

绝对定位的行为也是如此，只是它的包含块不一样。绝对定位不是相对视口，而是相对最近的祖先定位元素。跟固定元素一样，属性 top、right、bottom 和 left 决定了元素的边缘在包含块里的位置。

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，通常会相对于父级元素进行偏移
#father {
    border: 1px solid red;
    position: relative;
}

/* 会移动到右边相对于父级元素10px的地方 */
#father > div:nth-of-type(2) {
    background-color: rgb(168, 166, 57);
    transform: translate(-50%, -50%);
    position: absolute;
    right: 10px;
}

绝对定位是定位类型里的重量级选手。它经常跟 JavaScript 配合，用于弹出菜单、工具提示以及消息盒子。我们将用绝对定位来构建一个下拉菜单，但在此之前，我们需要先看看它的搭档：相对定位。

相对定位 relative​

相对定位可能是最不被理解的定位类型。当第一次给元素加上 position: relative 的时候，你通常看不到页面上有任何视觉改变。相对定位的元素以及它周围的所有元素，都还保持着原来的位置

相对定位（relative positioning）是CSS中的一种定位方式，它是指元素相对于其原本的位置进行定位，而不会影响其他元素的位置。相对定位不会使元素脱离文档流，仍然占据着其原本的空间，并且周围的元素也不会被其覆盖。

如果加上 top、right、bottom 和 left 属性，元素就会从原来的位置移走，但是不会改变它周围任何元素的位置。如图 7-4 所示，四个 inline-block 元素，给第二个元素加上三个额外的属性：position: relative、top: 1em、left: 2em，将其从初始位置移走，但是其他元素没有受到影响。它们还是围绕着被移走元素的初始位置，跟随着正常的文档流。

设置 top: 1em 将元素从原来的顶部边缘向下移动了 1em；设置 left: 2em 将元素从它来的左侧边缘向右移动了 2em。这可能导致元素跟它下面或者旁边的元素重叠。在定位中，也可以使用负值，比如 bottom: -1em 也可以像 top: 1em 那样将元素向下移动 1em。

提示

跟固定或者绝对定位不一样，不能用 top、right、bottom 和 left 改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。可以用 top 或者 bottom，但它们不能一起用（bottom 会被忽略）。同理，可以用 left 或 right，但它们也不能一起用（right 会被忽略）。

有时可以用这些属性调整相对元素的位置，把它挤到某个位置，但这只是相对定位的一个冷门用法。更常见的用法是使用 position: relative 给它里面的绝对定位元素创建一个包含块。

相对定位的使用场景主要包括以下几个方面：

  • 简单的微调：当需要微调元素的位置时，可以使用相对定位进行调整。通过设置元素的top、right、bottom、left属性，可以相对于元素原本的位置进行微小的偏移。
  • 元素重叠：有时候我们希望元素在文档流中保持位置，但与其他元素重叠显示。使用相对定位可以实现这一效果，通过设置z-index属性来控制元素的叠放顺序。
  • 动画效果：在CSS动画中，相对定位常常被用来作为动画效果的起始状态。通过设置元素的初始位置，再结合CSS过渡或关键帧动画，可以实现元素从原位置开始的平移、缩放或旋转等动画效果。
  • 伪类效果：有时候我们希望在触发某个伪类（如:hover）时改变元素的位置。相对定位可以与伪类结合使用，通过设置元素在伪类状态下的偏移位置，实现鼠标悬停时元素位置的变化。
  • 绝对定位的参考：当元素的子元素使用绝对定位（absolute positioning）时，通常会相对于最近的已定位父元素进行定位。如果没有已定位的父元素，子元素会相对于文档根元素进行定位。因此，有时候我们可以使用相对定位来创建一个已定位的容器，使得子元素能够相对于该容器进行定位。
编辑此页
最后由 alsritter.mac 于 更新