div中的固定div位置不起作用

Question

我有以下HTML和CSS

section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1147px;
  padding-right: 0;
  padding-left: 0;
}

#first_div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

#first_child_div {
  max-width: calc(60% - 9px);
  width: 100%;
}

#second_child_div {
  max-width: calc(34% - 9px);
  width: 100%;
  position: fixed;
}

<section>
  <div id="first_div">
    <div class="first_child_div">First child</div>
    <div class="second_child_div">Second child</div>
  </div>
</section>

模板基本上看起来像这样。

模板

但是由于某种原因，当我上下滚动时，第二个子div不会上下滚动。有什么我想念的吗？谢谢您的帮助

Answer 1

您应删除位置：固定为第二格。

Answer 2

检查您的ID选择器，您使用井号而不是句号。因为您使用的是页面元素类而不是ID。

。first_child_div {}.second_child_div {}

您还可以使用第二个子div样式位置：固定；尝试将其更改为相对]

Answer 3

Fixed means:

元素在每页上的相同位置。

因此，每当滚动时，此元素将位于相同位置。

如果要滚动元素：

#second_child_div{
    max-width: calc(34% - 9px);
    width: 100%;
    position: static;
}

"Position: static" means that:

该元素根据文档。

Answer 4

section{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1147px;
    padding-right: 0;
    padding-left: 0;
}

#first_div{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content:space-between;
    
  /*Extra style */
    background: #f7f7f7;
    padding: 1rem;
}

#first_child_div{
    max-width: calc(60% - 9px);
    width: 100%;
  /*Extra style */
    background: #e8e8e8;
}

#second_child_div{
    max-width: calc(34% - 9px);
    width: 100%;

 /*Extra style */
    background: #e8e8e8;
}

<section>
    <div id="first_div">
        <div id="first_child_div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div id="second_child_div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</section>