Question

我尝试解决以下问题：我有一些文本块，并且在div下具有绝对位置的元素

.img-wrapper{
 position: absolute;
 bottom:0;
height: 0;
padding-bottom: 53%;
 width:33%;
 margin:0;
 z-index:10;
}

我的问题是，当我在“高度”中调整窗口大小时，文本位于绝对位置的div下我怎样才能避免这种情况？我正在寻找诸如clear：both这样的东西，但对于position：absolute

这是我的jsfiddle： http://jsfiddle.net/ws9kpoe3/9/

Answer 1

更新

从OP澄清后，似乎需要完全重写。（所需的布局/效果称为粘性页脚）。

1。解决方案

删除所有z-index css规则并依靠元素的自然流动/堆叠：

http://jsfiddle.net/ws9kpoe3/10/

.text {
  position: relative;
  height: 100%;
}
.monimage {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.img-wrapper {
  position: absolute;
  bottom: 0;
  height: 0;
  padding-bottom: 53%;
  width: 33%;
  margin: 0;
}
.img2 {
  left: 33%;
}
.img3 {
  left: 66%;
}
.img-wrapper img {
  padding: 0;
  margin: 0;
  width: 100%;
}

<div class='img-wrapper img1'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img2'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img3'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>

<img src="http://94.23.46.98/img/FEUILLES_2.png" class="monimage"/>

<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dignissimos distinctio quasi necessitatibus quam expedita, error facere pariatur quas aut in explicabo voluptates recusandae, nemo rerum et enim est magni.
</div>

2。解决方案

向z-index块添加另一个.text规则：

http://jsfiddle.net/ws9kpoe3/11/

.text {
  position: relative;
  height: 100%;
  z-index: 101;
}
.monimage {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.img-wrapper {
  position: absolute;
  bottom: 0;
  height: 0;
  padding-bottom: 53%;
  width: 33%;
  margin: 0;
  z-index: 10;
}
.img2 {
  left: 33%;
}
.img3 {
  left: 66%;
}
.img-wrapper img {
  padding: 0;
  margin: 0;
  width: 100%;
}

<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dignissimos distinctio quasi necessitatibus quam expedita, error facere pariatur quas aut in explicabo voluptates recusandae, nemo rerum et enim est magni.
</div>

<div class='img-wrapper img1'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img2'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>
<div class='img-wrapper img3'>
  <img id='img1' src='https://dummyimage.com/600x400/000/fff.png'>
</div>

<img src="http://94.23.46.98/img/FEUILLES_2.png" class="monimage"/>

避免div在绝对位置上位于另一个div之下或上方

1 个答案: