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 class="first_div">
    <div class="first_child_div">First child</div>
    <div class="second_child_div">Second child</div>
  </div>
</section>

而且模板看起来基本上是这样的。

模板

*已编辑 但是由于某种原因，当我上下滚动时，第二个子 div 仍然跟随页面的流动。但我希望它始终保持在同一个地方，即使页面滚动。有什么我想念的吗？感谢您的帮助。

Answer 1

您应该删除 position: fixed to second div。

Answer 2

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

.first_child_div {} .second_child_div {}

您还使用第二个子 div 样式 position:fixed;尝试将其更改为相对

Answer 3

Fixed means:

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

也就是说，每当你滚动时，这个元素都会在同一个位置上。

如果你想让你的元素滚动：

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

"Position: static" means that:

元素按照正常流程定位 文件。

Answer 4

section{
    max-width: 1147px;
    padding-right: 0;
    padding-left: 0;
}

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

  /*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%;
    position: fixed;
    right: 0;
    top: 1rem;
 /*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. <br> 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>