html - 在 bootstrap 容器中将 2 个绝对 DIV 放置在 1 个相对 DIV 中

Question

我正在尝试将 2 个 div 放置在 Bootstrap 容器内的 1 个 div 内......一个位于左上角，一个位于右上角。

我可以把左上角放在我想要的位置，但是右下角，当放置 right: 20px 时，它位于浏览器本身的右侧，而不是在容器内.

这是我的 HTML 和 CSS:

<div id="header">
<div class="container">
    <div class="div1">
        Top left content
    </div>
    <div class="div2">
        Bottom right content
    </div>
</div>
</div>

#header {
height: 625px;
position: relative;
}

#header .div1 {
position: absolute;
top: 20px;
}

#header .div2 {
position: absolute;
bottom: 20px;
right: 20px;
}

如有任何关于如何让右下角的 div 位于容器右侧而不是浏览器右侧的建议，我们将不胜感激。

谢谢

Answer 1

您的绝对 div 放置在 #header 元素内，因为您在其上应用了 position:relative。

Bootstrap 没有明确设置容器类的相对位置。您需要为容器设置位置，然后您的绝对 div 将被放置在容器内:

.container{
  position: relative;
}

所以，最好替换以下内容:

#header {
   height: 625px;
   position: relative;
}

有了这个:

#header .container{
   height: 625px;
   position: relative;
}