Question

我目前有几个幻灯片要求让容器为position: relative;，其子元素（img）必须为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似乎隐藏在它之下。

Answer 1

那是因为＆＃34; .frontimg＆＃34;不是图像，而是围绕它们的div。

试试这个：

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

Answer 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>

Answer 3

您要在幻灯片放映下堆叠的div是static元素，而其他元素不是（display:relative,absolute, fixed超出正常的静态元素流。因此您必须指定该div absolute, fixed, or relative的位置，以便它可以正确地与其他元素互动。

我添加了一个演示，显示了两个position s中的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>

Answer 4

基于此answer，您需要javascript（在本例中为Jquery）才能实现此效果。在js文件中添加此Jquery代码。

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

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

Answer 5

添加另一个div-

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

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

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

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

如何将div放在另一个使用相对定位的div下面，但是它的元素是否绝对定位？

5 个答案:

段