时间戳

首页 > 解决方案 > 如何防止元素绝对位置在css中重叠

html - 如何防止元素绝对位置在css中重叠

问题描述

我有一个 div 元素来显示我的博客文章，每篇文章都必须在其中加载一个图像、一个标题和一个段落，
因为我想在图像底部显示一个简单的背景颜色的标题元素，然后我将标记写为这： 

<div class="post">
  <div class="thumb">
    <img class="image" src="img">
    <h3 class="title">title</h3>
  </div>
  <p class="content">Content</p>
</div>

我将图像和标题元素放在一个 div 块中以将它们相互放置（标题与图像重叠）并将拇指位置设置为相对，将两个子元素（图像和标题）设置为绝对以实现最终结果，但之后图像和标题超出了它的父元素（post 元素），并在页面中与它上面的其他元素重叠。 

.post {
  .thumb {
    position: relative;
    .image {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%
    }
    .title {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(#000, .7);
      color: #fff;
      padding: .5rem;
    }
  }
  .content {

  }
}

我想知道为什么父元素会失去它的高度块空间并与其他元素重叠。

我读了一些类似的问题，但没有一个回答这个问题。

我知道如果我只是将标题位置设置为绝对并固定在图像的底部保持块的空间，或者使用 css 网格来实现类似的事情，但我想找到这个问题的真正原因以及如何防止它？

完整的示例代码在 codepen 上：https ://codepen.io/anon/pen/GaMegN?editors=1100#0

.post .thumb {
  position: relative;
}
.post .thumb .image {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.post .thumb .title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: .5rem;
}
<div class="page">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="post">
    <div class="thumb">
      <img class="image" src="https://picsum.photos/400/200">
      <h3 class="title">just a sample title</h3>
    </div>

    <p class="content">
      CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
    </p>
  </div>
</div>

标签： htmlcss

解决方案

拇指不会有高度，因为带有的元素position: absolute;不会占用其中的相对空间。

我建议删除position: absolute;图像上的 ，这将给出拇指宽度和高度，但保留absolute标题

.post .thumb {
  position: relative;
}

.post .thumb .image {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.post .thumb .title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: .5rem;
  margin: 0;
}
<div class="post">
  <div class="thumb">
    <img class="image" src="https://picsum.photos/400/200">
    <h3 class="title">title</h3>
  </div>
  <p class="content">Content</p>
</div>

推荐阅读