Jak mogę wyświetlić element podrzędny nad elementem nadrzędnym ORAZ rodzeństwo elementu nadrzędnego?
Moje pytanie dotyczy tego pytania:
Pokaż element potomny nad elementem nadrzędnym za pomocą CSS
Odpowiedź na to pytanie, aby ustawićoverflow: visible
, działa tylko dla jednego rodzica jednego dziecka. Mam jednak rzędy tych elementów; rzędy rodziców, w których potrzebuję dziecka do wyświetlenia nad rodzicem. Mogę skłonić dziecko do wyświetlenia nad pierwotnym rodzicem, ale nie mogę skłonić dziecka do pokazania się nad rodzeństwem rodziców. Aby dać ci pojęcie o czym mówię, oto zrzut ekranu:
Chcę, aby wyskakujące opcje, element ukryty za dwoma następnymi wierszami, pojawiały się nad tymi dwoma wierszami, tak jak pokazuje się nad bezpośrednim rodzicem. Zajmowałem się tym i nie zrozumiałem tego, więc mam nadzieję, że ktoś tutaj będzie w stanie pomóc.
Oto podstawowa struktura:
.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>
Co mogę zrobić z CSS, aby wyskakujące okienko opcji pojawiło się nad wszystkimi innymi elementami? Czy jest coś, co muszę zrobić z HTML?