CSS позволил абсолютному элементу перекрывать родного брата родителя, не влияя на поведение прокрутки / масштабирования - PullRequest
0 голосов
/ 26 апреля 2019

У меня есть конкретный вариант использования, где у меня есть боковая панель с некоторыми элементами навигации в списке, и я хочу развернуть элементы при наведении курсора. Поднятый предмет от левого div должен перекрывать правый div.

Это в основном работает, если я создаю элементы списка absolute. Единственная проблема заключается в том, что их положение больше не является «хорошим» при масштабировании или прокрутке в переполнении. Чтобы исправить это поведение, я могу установить родительский элемент relative. Это, однако, меняет поведение стеков, и я больше не могу перекрывать правильный div.

Есть ли способ, чтобы левые элементы перекрывали правый элемент, не влияя на их положение при масштабировании или прокрутке?

.container {
  display:flex;
}

.left {
  width:49vw;
  height:50vh;
  background-color:yellow;
  overflow-y:auto;
  overflow-x:hidden;
}
.right {
  width:49vw;
  height:50vh;
  background-color:green;
  position:relative;
  
  //position:absolute;
  //left:49vw;
  z-index:1
}

li {
  position:relative; //affects scrolling/zooming behaviour if not used
}
    
.item-text:hover {
        background-color:red;
        width:80vw;
        position:absolute;
        z-index:2;
    }
<div class="container">

  <div class="left">
    <div class="list-container">
      <ul>
        <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
      </ul>
    </div>
  </div>
  <div class="right">
 
  </div>


</div>

.container {
  display:flex;
}

.left {
  width:49vw;
  height:50vh;
  background-color:yellow;
  overflow-y:auto;
  overflow-x:hidden;
}
.right {
  width:49vw;
  height:50vh;
  background-color:green;
  position:relative;
  
  //position:absolute;
  //left:49vw;
  z-index:1
}

li {
  //position:relative; //affects scrolling/zooming behaviour if not used
}
    
.item-text:hover {
        background-color:red;
        width:80vw;
        position:absolute;
        z-index:2;
    }
<div class="container">

  <div class="left">
    <div class="list-container">
      <ul>
        <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
                <li><div class="item-text">
        1
        </div></li>
      </ul>
    </div>
  </div>
  <div class="right">
 
  </div>


</div>

jsfiddle

1 Ответ

1 голос
/ 26 апреля 2019

Вы на правильном пути с z-index.Сложность в z-index заключается в том, что он переопределяет только порядок размещения WITHIN в своем родительском элементе и работает только для элементов, которые имеют нестатическое свойство position (что угодно, кроме значения по умолчанию).В вашем CSS z-index для .right div равен 1, а .item-text z-index равен 2. Хотя кажется, что он должен работать, .item-text все еще находится внутри .left div, чья z-index по умолчанию auto, что ставит его и все его содержимое ниже .right div.

Однако мы можем изменить это, установив z-index для родительских элементов,Ниже, вместо установки более высокого z-индекса для элемента li или его содержимого, я установил более высокий z-индекс для желтого div, чтобы он (и его дочерние элементы) перекрывали своего родного брата.Тогда переполнение желтого div будет выше зеленого.

Подробнее о z-index вы можете прочитать здесь: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  .container {
    /*We can either use flex positioning, or a combination of float and relative positioning 
below to achieve the desired layout.*/ 
     display:flex; 
  }

  .left, .right {
    display:inline-block;
    width:50%;
    height:200px;

  /* Below is an alternate way of arranging the elements to get the same result. 
I find this useful because it explicitly sets the position property.*/

    /*
    float:left;
    position:relative; 
    */
  }

  .left {
    background: yellow;
    z-index:2;
    overflow:visible;
  }

  .right {
    background: green;
    z-index:1;
  }

  li:hover {
    background: red;
    width:120%;
  }
<div class="container">
  <div class="left">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
  <div class="right">
  </div>
</div>
...