Блог

Главная - Вопросы по программированию - Создайте div, который не влияет на расположение других элементов на странице

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

#html #css

Вопрос:

Я сделал этот фон для веб-страницы, и теперь мне нужно вставить в нее текст и изображения. Но если я помещу что-нибудь, кроме тега, элемент ::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>

Можно ли создать div, который не изменяет расположение элемента «до», созданного только с помощью css?

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;
}```

Комментарии:

1. Вы добавили позицию:абсолютная в свой div? Эти разделители находятся вне обычного потока элементов страницы. Ни на что не влияйте.

Ответ №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;
}

Фон (определенный в ::до и ::после) перестанет менять положение.

Ответ №2:

Позиция вашего псевдо-элемента «до», похоже, не перемещается (поскольку следует ожидать, что это псевдо-контент, который появляется перед самим div).

Это псевдоэлемент after, который перемещается, если вы добавляете текст в div. Это связано с тем, что для последующего позиционирования не было задано верхнего положения, поэтому он просто принимает то место, куда попал div, в качестве его вершины. Установка верха (этот фрагмент предполагает 70%) и обеспечение того, чтобы сам div имел настройку положения (чтобы круглые украшения могли располагаться относительно этого, на случай, если тело изменит положение/размер);

 .page_part {
  /* qui */
  background-color: #0a0a0a;
  width: 100%;
  height: 100vh;
  position: absolute;
}

.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%;
  top: 70;
  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>
Метки: ,