Создайте Div, который не влияет на позиционирование других элементов на страницеHtml

Программисты Html
Ответить
Anonymous
 Создайте Div, который не влияет на позиционирование других элементов на странице

Сообщение Anonymous »

Я сделал этот фон для веб-страницы, и теперь мне нужно поместить немного текста и изображений в детали, но если я все положу, кроме тега, :: After element каждый раз ниже, пока он не исчезает под страницей..page_part{
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{
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;
}
< /code>

this is the page part


< /code>

Возможно создать Div, который не изменяет позиционирование элемента «до», который я создал только с CSS? < /p>
html < /p>

4


< /code>
css < /p>
.page_part:nth-child(5){
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;
}```


Подробнее здесь: https://stackoverflow.com/questions/684 ... n-the-page
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»