Question

所以我试着去看看，例如：

我的代码如下所示：

<div class="blog-posts">
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/800x500"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/800x1000"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
</div>

https://jsfiddle.net/tenold/5ondm4f3/3/

我遇到的问题是将摘录相对移动到图像后，显然底部留有空白区域。我如何制作它，以便上面的示例照片中没有空白区域？

需要考虑的事项：图像可以是任何高度。摘录文本可以是任意长度。

使用CSS执行此操作的最佳方法是什么？我似乎无法弄明白。我似乎无法通过绝对定位找到一种方法，因为图像和文本的高度是可变的。

Answer 1

使用position:relative和top属性时，div占用的初始空间保持不变，即使从初始位置移动，也不会被其他内容填充。就像你可以阅读here：

设置a的top，right，bottom和left属性相对定位的元素将导致它被调整远离它的正常位置。 其他内容不会调整为适合 元素留下的任何差距。

因此，我建议您使用margin-top代替负值。不要忘记调整z-index以确保内容保留在图片的顶部：

＆＃13;

.blog-posts {
  max-width: 800px;
  margin: 0 auto;
}

.blog-post {
  border-bottom: 1px solid #efefef;
  padding-bottom: 50px;
  margin-bottom: 50px;
}

.featured-image img {
  display: block;
}

.excerpt {
  max-width: 60%;
  margin: 0 auto;
  background: white;
  padding: 50px;
  margin-top: -50px;
  position:relative;
  z-index:2;
  border: 1px solid #eee;
}

h1 {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  line-height: normal;
}

p {
  margin: 0;
  padding: 0;
  line-height: 200%;
}

＆＃13;

<div class="blog-posts">
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/700x200"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/700x200"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/700x200"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
</div>

＆＃13;

Answer 2

将top替换为margin-top，并添加z-index: 1得到z轴上的图像元素...完成。

相对定位会移动一个元素的静态位置，但会留下元素占用的原始空间;它仍会影响其他元素位置，就像它仍处于原始的静态位置一样。然而，负余量顶部会“拖累”整个元素，因此流中的所有后续内容都会相应地向上移动。

.excerpt {
  max-width:60%;
  margin:0 auto;
  background:white;
  padding:50px;
  position: relative;
  /*top:-50px;*/
  margin-top:-50px;
  z-index: 1;

https://jsfiddle.net/5ondm4f3/4/

相对定位div时的空白问题

2 个答案: