Hoe kan ik het onderliggende element boven bovenliggende element EN broers en zussen van het bovenliggende element weergeven?

Mijn vraag heeft betrekking op deze vraag:

Toon onderliggende element boven bovenliggend element met behulp van CSS

Het antwoord voor die vraag, om overloop in te stellen: zichtbaar , werkt voor slechts één ouder van één kind. Ik heb echter rijen van deze elementen; rijen van ouders waar ik het kind nodig heb om over de ouder te laten zien. Ik kan het kind laten weergeven over de oorspronkelijke ouder, maar ik kan het kind niet laten verschijnen over broers en zussen van de ouders. Om u een idee te geven van waar ik het over heb, is hier een screenshot:

screenshot

Wat ik wil, is dat de pop-upoptie, het element dat zich achter de volgende twee rijen bevindt, over die twee rijen wordt weergegeven, net zoals het boven het directe bovenliggende element wordt weergegeven. Ik heb er mee gerommeld en ben er niet achter gekomen, dus hopelijk kan iemand hier helpen.

Hier is de basisstructuur:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>

Wat kan ik met de CSS doen om de pop-up met opties weer te geven over alle andere elementen? Is er iets dat ik moet doen met de HTML?

6
Heb je geprobeerd het kind een hogere Z-indexwaarde te geven?
toegevoegd de auteur Bluefire, de bron
Ook geeft u een relatief pad naar een afbeelding in uw CSS - arrow.png. Kun je me de directe URL hiervoor geven?
toegevoegd de auteur Bluefire, de bron
Het kind een hogere Z-index geven werkt niet. Ook heb ik nu alles lokaal, dus er is geen directe URL, maar dat zou er niet toe doen. Vervang het gewoon met de afbeelding van de tijdelijke aanduiding.
toegevoegd de auteur rsanchez1, de bron

1 antwoord

position: relative for an element creates a new positioning context. Child elements of this element are positioned in this local context. They cannot leave this context. If you want to position child elements above siblings of its parent element, you should set z-index for its parent element to a higher value than z-index of its siblings.

Als de effectieve z-index positie van het element ten opzichte van zijn broers en zussen uitsluitend afhankelijk is van hun DOM-boomorde, dan verplaatst het element naar de positie na alle broers en zussen in de DOM-boom (indien semantisch geschikt) zou ook kunnen helpen.

Merk op dat je dynamisch z-index dynamisch kunt veranderen via JavaScript (let op, in termen van Unobtrusive JS, vergeet niet om een ​​redelijk alternatief voor pure CSS te bieden, zodat de inhoud niet verborgen was als JS uitgeschakeld).

10
toegevoegd
@karthipanraj Het antwoord is bijgewerkt met alternatieven.
toegevoegd de auteur Marat Tanalin, de bron
Bedankt! Dat deed het.
toegevoegd de auteur rsanchez1, de bron
De bovenstaande case werkt. Maar als de z-index van bovenliggend niveau niet kan worden verhoogd (waardoor de z-index van ouders de broer of zus verbergt), is er een oplossing
toegevoegd de auteur karthipan raj, de bron