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

Question

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:

.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

toegevoegd 24 juni 2012 op 07:44 de auteur rsanchez1 bewerkt 25 juli 2018 op 12:41

Bekeken: 3

de bron

ja ru fr es pt de

Heb je geprobeerd het kind een hogere Z-indexwaarde te geven?

toegevoegd 24 juni 2012 op 08:24, 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 24 juni 2012 op 08:27, 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 24 juni 2012 op 07:05, de auteur rsanchez1, de bron

1 antwoord

de auteur Marat Tanalin · Answer 1 · 2012-06-24T10:29Z

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).