为什么位置属性会改变显示：flex？答案

【问题标题】：Why is position attribute altering display: flex?为什么位置属性会改变显示：flex？
【发布时间】：2021-05-04 19:17:22
【问题描述】：

我正在尝试实现一个必须具有固定位置的可调整大小的目录，但是 position: fixed 将 .topic_body 定位在 .toc 后面。如果我删除位置属性，我会得到想要的输出，但在我的实际网站上，位置属性非常重要。有没有办法“解决”这个问题？

这是一个不工作的例子（toc 的位置是固定的）：

<html>

<head></head>

<body>
    <div class="test">
        <div class="toc">
        </div>
        <div class="topic_body">
             <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </div>
        </div>
    </div>
    <style>
        .test {
            display: flex;
        }
        
        .topic_body {
            flex-grow: 1;
            background: lightblue;
        }
        
        .toc {
            resize: horizontal;
            overflow: auto;
            border: 1px solid black;
            margin-right: 12px !important;
            background-color: #f1f1f1;
            height: 82vh;
            width: 500px;
            position: fixed;
        }
    </style>
</body>

</html>

【问题讨论】：

你能解释一下“position: fixed 是如何破坏一切的......”吗？显然这就是您要解决的问题，但如果没有解释问题是什么，我们实际上只是在猜测可能是什么解决方案。可能值得看一下“How to Ask”，可能还需要看一下tour。
它在您编写代码时工作。你的期望是什么？
如果删除位置：fixed；你应该看看它应该如何实际工作。但在这种情况下，位置：固定；对我来说非常重要。 @Shashank Gb
@dihime 你需要.toc 和.topic_body 并排，但.toc 应该可以水平调整大小对吧？
"但在我的实际网站上，位置属性非常重要" - 但显然它不起作用。所以你需要一个修复，这可能完全是另外一回事，除非你解释为什么需要固定定位，否则我们找不到解决方案。

标签： html css

【解决方案1】：

position: fixed; 将一个元素从文档流中取出（也从您的 flex 内容中取出），这可能导致重叠，因为它的位置参数仅引用视口/窗口，而不引用任何其他元素。

您可能想改用position: absolute，将position: relative 应用于其父元素以将其定义为位置锚点，并在topic-body 元素上使用margin-top 以避免重叠。或者使用完全不同的东西......

【讨论】：

【解决方案2】：

如果你想在滚动中固定位置，你需要使用position: sticky;

More Info at W3schools

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

【讨论】：