html - 创建一个不影响页面上其他元素定位的 div

Question

我为网页制作了这个背景，现在我需要将一些文本和图像放入该部分。但是如果我放任何东西，除了标签，::after 元素每次都会降低，直到它消失在页面下面。那么，是否可以制作一个不移动页面中其他元素的 div？

.page_part{ /* qui */
    background-color: #0a0a0a;
    width: 100%;
    height: 100vh;
    
}
.page_part::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0px;
    margin-bottom: 50%;
    justify-content: center; 
    width:50%;
    height: 90vh;
    background-image: linear-gradient(to top right,#FFBB86FC,#FFBB86FC, #FF3700B3);
    clip-path: circle(30% at right 50%);
}
.page_part::after {
    content: '';
    position: absolute;
    z-index: 0;
    left:0px;
    margin-top: 10%;
    width:25%;
    height: 80vh;
    background-image: linear-gradient(to top right,#ff86fffc,#fdff86fc);
    clip-path: circle(30% at left 50%);
}
.page_part h2{ /* setto gli h2 */
    background-color: #111111;
    box-shadow: 2.8px 2.8px #1d1d1d;
    color: #E0E0E0;
    text-align: center;
    overflow-y: hidden;
    width: auto;
    font-weight: bold;
    font-size: 3.4vh;
    padding: 8px 24px;
}

    <div class="page_part">
        <h2>this is the page part</h2>
        <div></div>
    </div>

是否可以创建一个不改变我仅使用 css 创建的“之前”元素的位置的 div？

html

    <div class="page_part">
        <h2>4</h2>
        <div></div>
    </div>

CSS

.page_part:nth-child(5){ /* qui */
    background-color: #0a0a0a;
    width: 100%;
    height: 100vh;
    
}
.page_part:nth-child(5)::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0px;
    margin-bottom: 50%;
    justify-content: center; 
    width:50%;
    height: 90vh;
    background-image: linear-gradient(to top right,#FFBB86FC,#FFBB86FC, #FF3700B3);
    clip-path: circle(30% at right 50%);
}
.page_part:nth-child(5)::after {
    content: '';
    position: absolute;
    z-index: 0;
    left:0px;
    margin-top: 10%;
    width:25%;
    height: 80vh;
    background-image: linear-gradient(to top right,#ff86fffc,#fdff86fc);
    clip-path: circle(30% at left 50%);
}
.page_part:nth-child(5) h2{ /* setto gli h2 */
    background-color: #111111;
    box-shadow: 2.8px 2.8px #1d1d1d;
    color: #E0E0E0;
    text-align: center;
    overflow-y: hidden;
    width: auto;
    font-weight: bold;
    font-size: 3.4vh;
    padding: 8px 24px;
}```

Answer 1

只需添加

position: absolute;

以及 page_part h2 中的其他样式属性

.page_part h2{
    background-color: #111111;
    box-shadow: 2.8px 2.8px #1d1d1d;
    color: #E0E0E0;
    text-align: center;
    overflow-y: hidden;
    width: auto;
    font-weight: bold;
    font-size: 3.4vh;
    padding: 8px 24px;
    position: absolute;
}

背景(在::before 和::after 中定义)将停止改变位置。