Question

在这里，我有三个具有位置的元素：绝对。

第一和第二元素可以，但第三元素没有出现。

body {
  margin: 0;
  padding: 0;
  background: red;
  position: relative;
}

#first {
  border: solid green;
  height: 200px;
  padding: 100px;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
}

#second {
  border: solid blue;
  height: 200px;
  padding: 100px;
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
}

#third {
  position: absolute;
  bottom: 0;
  right: 0;
  border: solid brown;
  height: 100px;
  padding: 100px;
  height: 50px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>

  <section id="first"></section>
  <section id="second"> </section>
  <section id="third"></section>

</body>

</html>

Answer 1

在元素上使用position: absolute时，该元素将从文档的常规流程中删除。当您对某个元素的所有直接子元素执行此操作时，它最终会崩溃，并且height为0。如果您使用网络检查器，则可以确认您的容器（在这种情况下，body）高0px。

在bottom上设置#third属性会使它与body元素的底部对齐，该元素位于视口的顶部，随后导致呈现您的元素在您看不到的视口上方。

如果您在height上设置了固定的min-height或body，则可以解决此问题。一种常见的模式是将主体的最小高度设置为视口的高度：

body {
  min-height: 100vh;
}

当我将其位置设置为绝对时，元素不会出现

1 个答案: