div с абсолютной позицией скрывается

Question

Вот мой простой код.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.one {
  background: yellow;
  height: 100px;
  position: absolute;
}

.two {
  background: blue;
  height: 400px;
  position: absolute;
}

.three {
  background: red;
  height: 300px;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

А вот так вывод выглядит в JSFiddle. Теперь классы 1 и 2 имеют абсолютные позиции, поэтому они больше не являются частью нормального потока документов. Итак, третий класс, который красный, смещается наверх. Я это понимаю. Но что случилось с первым классом (желтый) и вторым классом (синий)? Я думаю, что третий класс должен был сместиться наверх и перекрыться как с первым, так и с вторым классом Итак, что здесь происходит?

Answer 1

Суть в том, что вы упомянули высоту absolute дел, но никогда не упоминали ширину. Таким образом, absolute div не исчезают, но не отображаются из-за нулевой ширины.

Мы должны помнить, что когда вы устанавливаете любой элемент как absolute, он должен устанавливать width, height , поместите в него содержимое или укажите left right координату.

См. здесь .

* {
  margin : 0;
  padding: 0 ;
  box-sizing: border-box;
}

.one {
  background: yellow ;
  width: 100px;
  height: 100px ;
  position: absolute ;
}

.two {
  background: blue;
  height: 400px ;
  position: absolute ;
  left: 25%;
  right: 25%;
}

.three {
  background: red ;
  height: 300px ;
}

<div class="one">

</div>

<div class="two">

</div>

<div class="three">

</div>

Answer 2

Если вы хотите увидеть скрытый div, вам нужно добавить свойство z-index.

.one {
  background: yellow ;
  width: 100px;
  height: 100px ;
  position: absolute ;
  /* Increase numbers as your need */
  z-index: 1;
}

.two {
  background: blue;
  height: 400px ;
  position: absolute ;
  left: 25%;
  right: 25%;
  /* Increase numbers as your need */
  z-index: 2;
}

.three {
  background: red ;
  height: 300px ;
}

Answer 3

Элемент с положением: абсолютный; позиционируется относительно ближайшего расположенного предка (вместо позиционированного относительно окна просмотра, как фиксированный). Если вы хотите отобразить все три деления, вы можете попробовать это:

.one {
  background: yellow ;
  height: 100px ;
}

.two {
  background: blue ;
  height: 400px ;
}

Вам просто нужно удалить position: absolute, поскольку она работает как фиксированная позиция. Я надеюсь, что это помогает. Если все еще какие-либо вопросы, не стесняйтесь обсуждать!