При вращении элемента он размещается на неподвижном элементе

avatar
Meysam
8 августа 2021 в 16:20
23
1
0

Когда я поворачиваю что-то с помощью свойства css transform, оно размещается на фиксированном элементе. В этом примере, когда я прокручиваю страницу, я хочу, чтобы .child div был на всех элементах. .two работает нормально и идет за потомком, но .one помещается на него.

.parent {
  width: 100%;
  height: 100%;
}
.child {
  position: fixed;
  width: 100%;
  background-color: blue;
}
.one {
  text-align:left;
  transform: rotate(2deg);
}
br {
  display: block;
  line-height: 220px;
}
<div class="parent">
  <div class="child">
    <p>1</p>
    <p>2</p>
  </div>

</div>
<p style='height:200px'></p>
<p class="one">ONE</p>
<p class="two">TWO</p>
<p style='height:700px'></p>
Источник
Ozik Jarwo
8 августа 2021 в 16:25
0

Итак, вы говорите, что хотите, чтобы .one шло позади .child, например .two?

Meysam
8 августа 2021 в 16:26
0

@OzikJarwo Да.

Ответы (1)

avatar
Ozik Jarwo
8 августа 2021 в 16:28
0

Вы можете указать z-index фиксированному элементу, чтобы он был на всех элементах.

.parent {
  width: 100%;
  height: 100%;
}
.child {
  z-index:1; /* this */
  position: fixed;
  width: 100%;
  background-color: blue;
}
.one {
  text-align:left;
  transform: rotate(2deg);
}
br {
  display: block;
  line-height: 220px;
}
<div class="parent">
  <div class="child">
    <p>1</p>
    <p>2</p>
  </div>

</div>
<p style='height:200px'></p>
<p class="one">ONE</p>
<p class="two">TWO</p>
<p style='height:700px'></p>

Подробнее о свойстве z-index здесь.