具有固定父级的相对子级的底部属性不起作用

Question

我有一个position:relative ; bottom: 0;的子元素和一个position: fixed ; height: 100vh;的父div。子元素不会到底，为什么？下面是完整代码。通过检查员，我在顶部看到.secondary形状，而不是在底部。

HTML

<div class="fullpagenav active_nav">
  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
  ...
  </div>
</div>

CSS

.fullpagenav {

    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 2;

}

.secondary.toggled-on {

    width: 100%;
    display: block;
    bottom: 0;
    position: relative;

}

Answer 1

position: relative将元素相对于放置在正常位置。

即bottom: 0表示不要将元素从通常放置的位置偏移。

您正在寻找的是position: absolute

请在此处查看不同位置值的说明：https://developer.mozilla.org/en/docs/Web/CSS/position

特别是，它说的是关于relative（强调我的）：

  

这个关键字列出了所有元素，好像元素没有定位，然后调整元素的位置，而不改变布局（从而为元素留下一个空白一直没有定位。）

Answer 2

使用CSS属性可以有两种解决方案

（i）vertical-align: bottom;

（ii）将position : relative添加到父级，将position : absolute添加到子级

Answer 3

相对定位元素上的

Bottom表示您希望将其底部从自动位置移动多远。在你的情况下，0，这使它保持在它想要的地方。 您需要position: absolute或flexbox：

.fullpagenav {
  display: flex;
  flex-direction: colum;
}

.secondary.toggled-on{
  margin-top: auto;
}

Answer 4

这不是position: relative的工作原理。当您设置bottom: 0并且希望该元素位于父元素的底部时，它不会定位您在此处尝试执行的相对于父元素的元素。这就是position: absolute的用途，但它会将这个元素从正常元素中流出来。所以其他选择是在父元素上使用display: flex，在子元素上使用align-self: flex-end。

body, html {
  margin: 0;
}
.fullpagenav {
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 2;
  background: gray;
  display: flex;
}

.secondary.toggled-on {
  width: 100%;
  background: black;
  color: white;
  align-self: flex-end;
}

<div class="fullpagenav active_nav">
  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
   Div
  </div>
</div>