css - 具有绝对内部元素的相对文章 0px 高度

Question

我有一个相对定位的容器元素，因此该父元素中的所有绝对子元素都被覆盖。以下元素与渲染的 0px 高度导致的容器重叠。有没有不用JS给容器内部元素高度的解决方案？

HTML:

<article class="modul header_modul drei_boxen_slider ">
       <section class="element">
        <div class="modul_image_wrapper">
         <img src="img/pic.jpg" alt="title"/>
         <div class="modul_image_title"><h4>Image Title</h4></div>
       </div>
     </section>
      <section class="element">
        <div class="modul_image_wrapper">
         <img src="img/pic.jpg" alt="title"/>
         <div class="modul_image_title"><h4>Image Title</h4></div>
       </div>
     </section>
      <section class="element">
        <div class="modul_image_wrapper">
         <img src="img/pic.jpg" alt="title"/>
         <div class="modul_image_title"><h4>Image Title</h4></div>
       </div>
     </section>
   </article>

CSS:

.drei_boxen_slider{
    width:100%;
    height:auto;
    position:relative;
    clear:both;


}
.drei_boxen_slider .element{
    width:100%;
    height:auto;
    position:absolute;

}

Answer 1

// test you this code
.drei_boxen_slider {
 bottom: 0;
 height: auto;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
 .drei_boxen_slider .element {
  border: 1px solid #FF0000;
  height: auto;
  margin-bottom: 10px;
  position: absolute;
  width: 100%;
}