使用 position:absolute 时内容溢出 div

Question

我有一个 css 网格布局，其中包含 4 个带有渐变叠加层的图像和图像顶部的文本，当我调整窗口大小时，文本会从图像 div 中消失。这就是我想要的，即使窗口被调整大小 - https://i.imgur.com/Fb3BivC.png，但文本会像这样溢出 - https://i.imgur.com/BFQS45U.png。我希望文本调整大小并保持原位。我无法创建一个 sn-p，因为由于某种原因布局被弄乱了，所以我把我的 html 和 css 作为代码示例放在下面。

<!-- HTML -->
<div class="grid-container1">

    <div class="grid-item grid-item-1">
        <img src="images/blog11.jpg">
        <h3 class="big-img-content">Lorem ipsum dolor sit amet consectetur.</h3>
    </div>

    <div class="grid-item grid-item-2">
        <img src="images/blog12.png">
        <h3 class="small-img-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        </h3>
    </div>

    <div class="grid-item grid-item-3">
        <img src="images/blog13.jpg">
        <h3 class="small-img-content"></h3>
    </div>

    <div class="grid-item grid-item-4">
        <img src="images/blog14.jpg">
        <h3 class="big-img-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Assumenda, consectetur.</h3>
    </div>

</div>

/* CSS */

.grid-container1 {
    display: grid;
    width: 60%;
    margin: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 12% auto;
}

.grid-container1 > .grid-item > img { 
    display: block;
    object-fit: fill;
    max-width: 100%;
    flex: 1;
    min-height: 100%;
    border: 0.5px solid #858585;
}

.grid-item {
    position: relative;
}

.grid-item > .big-img-content {
    position: absolute; /* Position the background text */
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: linear-gradient(
    to bottom,
    hsla(0, 0%, 100%, 0.3) 0%,
    hsla(0, 0%, 98.73%, 0.301) 8.1%,
    hsla(0, 0%, 95.14%, 0.302) 15.5%,
    hsla(0, 0%, 89.6%, 0.305) 22.5%,
    hsla(0, 0%, 82.46%, 0.309) 29%,
    hsla(0, 0%, 74.07%, 0.313) 35.3%,
    hsla(0, 0%, 64.8%, 0.318) 41.2%,
    hsla(0, 0%, 54.99%, 0.323) 47.1%,
    hsla(0, 0%, 45.01%, 0.327) 52.9%,
    hsla(0, 0%, 35.2%, 0.332) 58.8%,
    hsla(0, 0%, 25.93%, 0.337) 64.7%,
    hsla(0, 0%, 17.54%, 0.341) 71%,
    hsla(0, 0%, 10.4%, 0.345) 77.5%,
    hsla(0, 0%, 4.86%, 0.348) 84.5%,
    hsla(0, 0%, 1.27%, 0.349) 91.9%,
    hsla(0, 0%, 0%, 0.35) 100%
    );
    color: #fff; 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    width: 100%; 
    padding: 30% 35% 4% 10%; 
    margin: 0;
    height: 100%;
}

.grid-item > .small-img-content {
    position: absolute; /* Position the background text */
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: linear-gradient(
    to bottom,
    hsla(0, 0%, 100%, 0.3) 0%,
    hsla(0, 0%, 98.73%, 0.301) 8.1%,
    hsla(0, 0%, 95.14%, 0.302) 15.5%,
    hsla(0, 0%, 89.6%, 0.305) 22.5%,
    hsla(0, 0%, 82.46%, 0.309) 29%,
    hsla(0, 0%, 74.07%, 0.313) 35.3%,
    hsla(0, 0%, 64.8%, 0.318) 41.2%,
    hsla(0, 0%, 54.99%, 0.323) 47.1%,
    hsla(0, 0%, 45.01%, 0.327) 52.9%,
    hsla(0, 0%, 35.2%, 0.332) 58.8%,
    hsla(0, 0%, 25.93%, 0.337) 64.7%,
    hsla(0, 0%, 17.54%, 0.341) 71%,
    hsla(0, 0%, 10.4%, 0.345) 77.5%,
    hsla(0, 0%, 4.86%, 0.348) 84.5%,
    hsla(0, 0%, 1.27%, 0.349) 91.9%,
    hsla(0, 0%, 0%, 0.35) 100%
    );
    color: #fff; 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    width: 100%; 
    padding: 52% 20% 4% 10%; 
    margin: 0;
    height: 100%;
}

.grid-item-1 {
    grid-column: 1 / span 2;
}
  
.grid-item-4 {
    grid-column: 2 / span 2;
}

Answer 1

这是因为您在选择器内使用填充来对齐它：.grid-item > .big-img-content

padding: 30% 35% 4% 10%;

要将其与中心对齐，您可以使用 flexBox：

display: flex;
align-items: center;

您可以申请一点padding-left 以在文本开头留出空闲空间。

注意你正在尝试的尺寸，第一个img，屏幕hjas a 1700和第二个1100，你应该考虑使用media querys来处理font-size或图像尺寸。

有更多关于flexbox的信息

Answer 2

如果弹性框不起作用，请尝试将此代码添加到您的 CSS：

html, body {
overflow-x: hidden;
}

不客气。