重叠背景直到一个元素

Overlap background until an element

我尝试将我的背景与卡片的开头重叠(就像在 stackblitz 上一样,但很干净)。我的目标是它恰好停在卡片的标题下。我试着用页面大小的百分比来做,但它不干净而且效果不是很好(大小随响应式设计、缩放等而变化)。 我也尝试计算高度但它很快变得复杂(标题在 child 的 child 的 child 中) 我正在寻找其他解决方案,您有什么想法吗?

我在找什么:

Stackblitz : https://stackblitz.com/edit/angular-sjgvvx

什么

我会分两部分。说 headersection。 header 获取背景和 padding-bottom。卡片位于部分容器中,并得到 NEGATIVE margin-top 等于卡片填充 + 文本高度。

通过这种方式,您可以向 header 添加任意数量的内容,并且它总是会将其他内容压低。

body {
  margin:0;
  padding:0;
  font-family: Arial, Helvetica;
  background-color: blue;
}
header {
  background-color: red;
  color: white;
  margin: 0;
  padding: 10px 10px 50px 10px;
}

.tiles {
  /* this is the important part. Make sure top margin = top padding + height of text */
  margin: -25px 10px 0 10px;
  display:flex;
  justify-content: space-between;
}

.tile {
  flex-basis: 25%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  min-height: 100px;
}
<header>
  <h2>Some Header Content</h2>
</header>
<section>
<div class="tiles">
  <div class="tile">Tile Content</div>
  <div class="tile">Tile Content</div>
  <div class="tile">Tile Content</div>
</div>
</section>

不是最优但可行,一种 hackkey 方法是使用 header 中的 pseuo-Element 应用背景,因此 它正好停在标题下卡片.

.container {
    padding: 50px 50px;
    overflow: hidden;
}

.container>div {
    background: lime;
    display: flex;
    flex-wrap: wrap;
}

.container>div>.card {
    flex: 1 0 40%;
    margin: 15px;
    background: pink;
}



/* Solution */
.card>h1 {
    position: relative;
}

.card>h1:before {
    content: '';
    position: absolute;
    background: red;
    
    /* huge numbers to ensure that it fits if screen is too large */
    width: 10000px;
    height: 10000px;
    left: -1000px;
    bottom: 0;
    z-index: -1;
}
<div class="container">
    <h1>title-page</h1>
    <span>Subtitle</span>
    <div>
        <div class="card">
            <h1>Title card</h1>
            <p>babfkds sbdf ksdbfl bdslkfb kdsbflk</p>
        </div>
        <div class="card">
            <p>example2 works!</p>
        </div>
        <div class="card">
            <p>example3 works!</p>
        </div>
    </div>
</div>