css как поднять блока выше родительского и ниже дочерного

Question

подскажите как заставить класса .content идти выше класса header-bar и header-ega и ниже класса header-content

.header-bar {
    width: 100%;
    height: 65px;
    background: #098088;
    position: fixed;
    top: 0;
    z-index: 1;
    left: 0;
  }
 .header-bar .header-content{
    background: #098088;
    clear:both;
    position: relative;
    display: inline-block;
    height: 55px;
    font-weight: 600;
    z-index:9;
    width: 100%;}

.header-bar .header-ega {
   position: absolute;
   bottom: 0; 
   width: 100%;
   height: 10px;
   background: #f8f8f8;
   border-radius: 15px 15px 0 0;}

.content{
   position: relative;
   width: 100%;
   height: auto;
   background: #f8f8f8;}

<div class="header-bar">
   <div class="header-content"></div>
   <div class="header-ega"></div>
</div>

<div class="content"></div>

Answer 1

в css очень странная система порядков (поищите в сети)

но самое главное что вам надо знать - z-index работает только внутри блока, т.е. никогда дочерний элемент не будет выше или ниже соседского

<div class = 'parent'>
    <div class = 'child'>...</div>
</div>
<div class = 'neighbor'>
...
</div>

т.е. блок child может перемещаться вверх/вниз только внутри parent относительно детей parent, т.е. своих соседей

и никак child отдельно от parent не сможет встать выше/ниже соседа parent (т.е. блока neighbor)

к сожалению

т.е. вы можете спозиционировать parent относительно neighbor и изменить ему порядок отрисовки, но все дочерние элементы parent будут или выше (если parent выше) или ниже (если parent ниже) neighbor

единственный вариант - вытаскивать детей из родителя и делать их родительскими соседями, т.е. равноправными участниками позиционирования

БЛОГ НА HUSL

css как поднять блока выше родительского и ниже дочерного

Ответы (1 шт):