相对父代的绝对定位后代的意外行为

问题描述 投票：0回答：1

我有以下html代码：

<body>
    <ul class='navbar'>
        <li class='navItem'>
            <div class='dropBox'>
                <div class='dropTitle'>
                    Careers
                </div>
                <div class='dropContent'>
                    <!-- further menu items -->
                    <!-- HR Roles , IT Roles -->
                </div>
            </div>
        </li>
        <li>
            <!-- more menu items -->
            <!-- Home -->
        </li>
    </ul>
</body>

我正在尝试实现如下所示的视觉效果：

为了达到这个结果，我将类 

<ul>
的 
navbar
设置为 
position: relative
，并将类 
<div>
的后代元素 
dropContent
设置为 
position: absolute
。具有 
<div>
类的 
dropBox
可以在可见和隐藏之间切换。给出的结果是：

打开菜单之前：

打开菜单后：

在线阅读后，我认为一个 

position: absolute
元素（在我的例子中是 
dropContent
类）将被放置在文档流下面最近的 
position: relative
祖先（在我的例子中是 
navbar
类）。相反，该元素被放置在最近的 position: relative 祖先的
顶部
。

为了解决这个问题，我尝试将我的 

margin-top
类的 
dropContent
设置为 
100%
。事实证明，这已将 
dropContent
类推到了视口的底部 - 因此 100% 是相对于视口而不是 
position: relative
父级进行的。

我在网上阅读了许多讨论相对和绝对定位元素行为的帖子，并从我的代码中删除了额外的 CSS 来尝试隔离问题，但似乎仍然无法得到我想要的结果。

有人可以告诉我我对 

position: relative
和 
position: absolute
的理解差距在哪里吗？我怎样才能达到我想要的结果？

我正在寻找 HTML 和 CSS 解决方案 - 而不是使用 Javascript 的解决方案。

html css css-position
1个回答
0
投票

Margin 总是将内容推送到其父级中。尝试下面的代码

.navbar{
  background:#E4E4E4;
}
ul{
  list-style:none;
}
.dropBox{
  position:relative;
}
.dropContent{
  position:absolute;
  left:0;
  background:grey;
  top:100%;
}
<body>
    <ul class='navbar'>
        <li class='navItem'>
            <div class='dropBox'>
                <div class='dropTitle'>
                    Careers
                </div>
                <div class='dropContent'>
                    <div>HR Roles</div>
                    <div>IT Roles</div>
                </div>
            </div>
        </li>
        <li>
            <!-- more menu items -->
            <!-- Home -->
        </li>
    </ul>
</body>

这就是你想要实现的目标吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.