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%;
}

相对文章0px高度与绝对内部元素

1 个答案: