html - 当我尝试将我的 div 放在位置 :absolute; all elements below go nuts 时

Question

我有一个导航菜单，悬停时，我希望下拉菜单显示在标题下方。我将我的位置设置为标题相对位置，这样我的下拉列表将定位为绝对位置，但实际发生的是我的标题下方的元素也受到了影响，老实说我不知道​​我的代码发生了什么。

我必须在这里提供一个示例:

<div id ="lower-header">
    <div class="wrapper">
        <img src="images/logo/logo_01.png">
        <ul>
            <li>
                <a href="#">KU 스타트업</a>
                    <div class="sub-menu-whole">

                    </div>
            </li>
            <li>프로그램</li>
            <li>스타트업 리더</li>
            <li>창업보육</li>
            <li>창업멘토단</li>
            <li>커뮤니티</li>
        </ul>
    </div>
</div>

https://codepen.io/alexdeveloperdeneris/pen/wNoMjm

它包括来 self 的 css 和 html 的代码片段

Answer 1

我无法重现您的问题(顺便说一句，您应该在您的代码笔上从 SASS 切换到 SCSS)。

但是，通常了解position: absolute 和position: relative 如何影响您设置样式的元素很重要。

This article很好地解释了它，但我猜是你的问题，重要的是要知道当你添加 position: absolute 到一个元素时，你正在将它从正常的流程中删除文档，而是将其准确地放在页面上的某个位置。 position: relative 以类似的方式运行，但不会从文档流中删除该元素。因此，这两者会对周围的元素产生重大影响。