Question

我有一个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块中以将它们彼此放置（标题与图像重叠），并将拇指位置设置为相对，并将两个子元素（图像和标题）设置为绝对，以达到最终结果，但是之后，图像和标题将超出其parent（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>

Answer 1

拇指不会具有高度，因为带有^A(B0|B8)PDS[[:alpha:]]{2}_[[:alpha:]]{4}$ ^A(B0|B8)PDS[[:alpha:]]{2}_[[:alpha:]]{4}($|[[:space]])的元素不会占据其中的相对空间。

我建议删除图像上的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;
}

Answer 2

将图像和标题的位置更改为相对位置，然后在标题中添加top：-100px（或其他值）

Answer 3

将任何元素设置为absolute时，它们将从正常文档流中移出，因此其他元素将自身定位，因为目标绝对元素不存在。

*{
 box-sizing:border-box;
}
.post .thumb {
  position: relative;
}
.post .thumb .image {
  display: block;
  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;
  margin:0;
}

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

Answer 4

绝对定位的元素脱离常规流程。父元素（位置：相对）现在对孩子的大小一无所知。对于他们来说，就像孩子有window.addEventListener('beforeinstallprompt', (e) => { // Prevent Chrome 67 and earlier from automatically showing the prompt //e.preventDefault(); let deferredPrompt; // Stash the event so it can be triggered later. deferredPrompt = e; // Show the prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt deferredPrompt.userChoice .then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } deferredPrompt = null; }); });。我不会以任何方式影响他们的身材。

如何防止这种情况？可能有很多方法。

不要在每个元素上使用绝对值：在这里，我将display: none设置为relative，以便可以控制.title。我需要z-index上的overflow: hidden。我在.thumb上添加了一些边距，以便可以看到更多图片

.title

.post .thumb {
  position: relative;
  
  /* new */
  overflow: hidden;
  margin-top: 20px;
}
.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;
  
  /* new */
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  margin-top: 60px;
}

或者使用背景图像代替<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/id/990/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>元素

<img>

.post .thumb {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 40%;
}
.post .thumb .title {
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: .5rem;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  margin-top: 60px;
}

如何防止CSS中的元素绝对位置重叠

4 个答案: