Как я могу показать дочерний элемент над родительским элементом И братьями и сестрами родительского элемента?

Мой вопрос связан с этим вопросом:

Показать дочерний элемент над родительским элементом с помощью CSS

Ответ на этот вопрос, чтобы установить overflow: visible, работает только для одного родителя одного ребенка. Однако у меня есть ряды этих элементов; строки родителей, где мне нужно, чтобы ребенок отображался над родителем. Я могу заставить дочерний элемент отображаться поверх исходного родителя, но я не могу заставить дочерний элемент отображаться поверх братьев и сестер родителей. Чтобы дать вам представление о том, о чем я говорю, вот скриншот:

скриншот

Я хочу, чтобы всплывающее окно параметров, элемент, скрывающийся за следующими двумя строками, отображалось над этими двумя строками так же, как оно отображается над своим непосредственным родителем. Я возился с этим и не понял, так что, надеюсь, кто-то здесь сможет помочь.

Вот основная структура:

.row,
.selector {
  position: relative;
}

.label,
.selector {
  display: inline-block;
}

.selector {
  overflow: visible;
}

.selector-inner {
  display: block;
}

.selector-arrow {
  float: right;
  width: 21px;
  height: 21px;
  background: url(arrow.png) no-repeat center center;
}

.selector-caption {
  display: inline-block;
}

.options-popup {
  position: absolute;
  z-index: 100;
  top: 0px;
  right: 0px;
}

.options-item {
  /* only for fonts and sizes */
}
<div class="row">
  <div class="label">Color Scheme:</div>
  <div class="selector">
    <div class="selector-inner">
      <div class="selector-arrow"></div>
      <div class="selector-caption">Standard</div>
    </div>
    <div class="options-popup">
      <div class="options-item">Standard</div>
      <div class="options-item">Dark</div>
      <div class="options-item">Light</div>
    </div>
  </div>
</div>

Что я могу сделать с CSS, чтобы всплывающее окно параметров отображалось поверх всех других элементов? Есть ли что-нибудь, что мне нужно сделать с HTML?


html css parent-child siblings
person rsanchez1    schedule 24.06.2012    source источник
comment
Вы пытались дать ребенку более высокое значение z-index?   -  person Bluefire    schedule 24.06.2012
comment
Кроме того, вы указываете относительный путь к изображению в своем CSS - arrow.png. Можете ли вы дать мне прямой URL для этого?   -  person Bluefire    schedule 24.06.2012
comment
Предоставление ребенку более высокого z-индекса не работает. Кроме того, сейчас у меня все локально, поэтому прямого URL-адреса нет, но это не имеет значения. Просто замените его любым изображением-заполнителем.   -  person rsanchez1    schedule 24.06.2012

Ответы (1)


arrow_upward
14
arrow_downward

position: relative для элемента создает новый контекст позиционирования. Дочерние элементы этого элемента располагаются в этом локальном контексте. Они не могут покинуть этот контекст. Если вы хотите расположить дочерние элементы над родственными элементами его родительского элемента, вы должны установить z-index для его родительского элемента на более высокое значение, чем z-index его родственных элементов.

Если эффективная z-index позиция элемента относительно его братьев и сестер зависит исключительно от их порядка в дереве DOM, то перемещение элемента на позицию после всех его братьев и сестер в дереве DOM (если это семантически уместно) также может помочь. .

Обратите внимание, что вы всегда можете изменить z-index динамически через JavaScript (просто, с точки зрения ненавязчивого JS, не забудьте предоставить разумную альтернативу чистому CSS, чтобы контент не был скрыт, если JS отключен).

person Marat Tanalin    schedule 24.06.2012
comment
Вышеприведенный случай работает. Но если z-индекс родителя не может быть увеличен (увеличение z-индекса родителей скроет его родного брата), есть ли какое-либо решение? - person karthipan raj; 23.12.2015
comment
@karthipanraj Обновлен ответ с альтернативами. - person Marat Tanalin; 23.12.2015