不要使用 CSS position:absolute 来覆盖两个元素

假设您有以下 HTML 结构来将图像与标题叠加：

    

        
    
    

        
Title of card
        
With some short teaser text
    

你可能会想将标题定位为绝对位置：

.card {
    position: relative;
    width: 300px;
}
.card > * {
    margin: 0;
}
.card header {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff3;
}

...但是这样你就失去了标题的布局。改用网格：

.card {
    display: grid;
    width: 300px;
}
.card > * {
    grid-area: 1/1;
    margin: 0;
}
.card header {
    background-color: #fff3;
}

这是包含完整示例的 codepen 链接。

**编码愉快！**