如何将一个 div 定位在另一个使用相对定位但对其元素使用绝对定位的 div 下方？答案

【问题标题】：How to position a div below another div that uses relative positioning, but absolute positioning for its elements?如何将一个 div 定位在另一个使用相对定位但对其元素使用绝对定位的 div 下方？
【发布时间】：2020-04-02 02:12:37
【问题描述】：

我目前有几个幻灯片需要我将容器设置为position: relative;，并且它的子元素（img's）必须是position: absolute;

像这样：

HTML

<div class="frontimg">
   <div><img src="img/jackson.jpg"></div>
   <div><img src="img/custom.jpg"></div>
</div>

CSS

    .frontimg {
  width: 100%;
  text-align: center;
  position: relative;
}

.frontimg img {
  position: absolute;
  width: 50%;
}

然后是一个小 js 脚本，让它们淡入淡出。

我无法在其下方放置另一个 div。它下面的 div 似乎隐藏在它下面。

【问题讨论】：

你能说得更清楚些吗，我不确定我是否完全理解你的问题！
需要在父div或者内部div中指定一个高度，否则需要javascript来实现这个效果。

标签： html css

【解决方案1】：

那是因为 ".frontimg" 的子元素不是图像，而是围绕它们的 div。

试试这个：

.frontimg div {
  position: absolute;
  width: 50%;
}

【讨论】：

没用。它只是使我试图在它们下方放置的 div 与它们重叠。

【解决方案2】：

如果图像有一个共同的高度，您可以简单地给.frontimg div 设置一个高度或底部填充等，以将以下元素向下推到图像之外。例如。

.frontimg {
  width: 100%;
  text-align: center;
  position: relative;
  padding-bottom: 110px;
}

.frontimg img {
  position: absolute;
  width: 50%;
}

.next {border: 5px solid #30353b; background: #e7e7e7; min-height: 100px;}

<div class="frontimg">
   <div><img src="https://unsplash.it/800/100"></div>
   <div><img src="https://source.unsplash.com/random/800x100"></div>
</div>

<div class="next">  
    <p>The following div</p>
</div>

【讨论】：

很遗憾，图片没有设置高度。它们是使用宽度属性设置的。所以它们的高度会因显示器而异。

【解决方案3】：

您要在幻灯片下方堆叠的 div 是 static 元素，而其他元素不是（display:relative,absolute, fixed 超出了静态元素的正常流动。因此，您必须为该 div 分配 @987654323 的位置@ 以便它可以与其他元素正确交互。

我添加了一个演示，在两个positions 中显示一个 div：

单击 div 将其 position 从 static 切换到 absolute。

片段

var div = document.querySelector('.div');

div.addEventListener('click', function(e) {
  if (div.classList.contains('static')) {
    div.classList.remove('static');
    div.classList.add('absolute');
  } else {
    div.classList.add('static');
    div.classList.remove('absolute');
  }
}, false);

.frontimg {
  width: 100%;
  text-align: center;
  position: relative;
}
.frontimg img {
  position: absolute;
  width: 50%;
}
.div {
  border: 1px solid grey;
  height: 50px;
  width: 50%;
  pointer-events:auto;
  cursor: pointer;
}
.static {
  position: static;
}
.absolute {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="frontimg">
  <div>
    <img src="http://placehold.it/350x150/000/fff?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x150/00f/fc0?text=2">
  </div>
</div>
<div class="div static">DIV</div>

【讨论】：

【解决方案4】：

基于这个answer，你需要javascript（在这种情况下是Jquery）来实现这个效果。在您的 js 文件中添加此 Jquery 代码。

var biggestHeight = "0";
$(".frontimg *").each(function(){
if ($(this).height() > biggestHeight ) {
  biggestHeight = $(this).height()
}
});

$(".frontimg").height(biggestHeight);

【讨论】：

【解决方案5】：

添加另一个 div -

<div class = "someClass"> Some text </div>

使用position:absolute 并分配一个top 属性来定义位置-

.someClass {
position: abolsute;
top : 40% //or whatever you like
}

您还可以添加换行符 - <br>

【讨论】：