新闻项目以 CSS 位置堆叠在一起

Question

我正在尝试创建一个包含新闻项目的网页，其中新闻图像、图像叠加、标题和文本都在彼此的顶部。但是，对于我的代码，如果我尝试在复制所有内容的下方继续创建下一条新闻，它将堆叠在第一条新闻的顶部。那么我怎样才能让下一个类似“News2”的图片+图片+标题+文字组合出现在“News1”下面而不是重叠呢？

我可以使用“top: xxx px;”强制关闭 News2 项目，但当页面中有很多新闻项目时，这似乎是一个糟糕的解决方案。

HTML:

<div class="NewsImage1 NewsImageBig"><img src="image.jpg" class="NewsImageBig"></div>
<div class="NewsImageOverlay1 NewsImageBig"><img src="Gfx/imageoverlay.png" class="NewsImageBig"></div>
<div class="NewsImageHeadline1">News headline goes here</div>
<div class="NewsImageText1">News text goes here</div>

CSS:

.NewsImageBig {
    position: absolute;
    max-width: 850px;
    max-height: 283px;
    border-radius: 10px;
    margin: 0px 12px;
}
.News1 {
    position: relative;
}
.NewsImage1 {
    z-index: 0;
}   
.NewsImageOverlay1 {
    z-index: 1;
    opacity: 0.9;
}
.NewsImageHeadline1 {
    position: relative;
    top: 215px;
    margin: 0px 45px;
    font-size: 22px;
    z-index: 2;
}
.NewsImageText1 {
    position: relative;
    top: 220px;
    margin: 0px 45px;
    font-size: 14px;
    z-index: 3;
}

此处仅提及代码且我尝试复制新闻项时的网页示例。

Answer 1

关于 absolute 和 relative 关系的示例。这里.shadow 和.title 都是position: absolute，只有当设置为position: relative 容器时才保持正常流

.news {
  display: inline-block;
  position: relative;
  background-size: cover;
  width: 40%;
  padding-bottom: 25%;
  border-radius: 10px;
  overflow: hidden;
  margin: 5px;
  box-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.news .shadow {
  position: absolute;
  z-index: 1;
  top:0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
}
.news .title {
  color: #FFF;
  position: absolute;
  z-index: 2;
  bottom: 5%; left: 5%; right: 5%;
}
.news .title h2, .news .title p {
  margin: 5px 0;
}

  <div class="news" style="background-image: url(https://picsum.photos/200);">
    <div class="shadow"></div>
    <div class="title">
      <h2>Title</h2>
      <p>lorem ipsum dolor sit emet</p>    
    </div>
  </div>

  <div class="news" style="background-image: url(https://picsum.photos/200);">
    <div class="shadow"></div>
    <div class="title">
      <h2>Title</h2>
      <p>lorem ipsum dolor sit emet</p>    
    </div>
  </div>

新闻项目以 CSS 位置堆叠在一起

News items stack in top of each other with CSS position

html

css

css-position