Waarom luistert een element met position fixed niet naar de z-index

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Snelle Jaap

Snelle Jaap

17/12/2020 10:32:13
Quote Anchor link
Ik heb een menu dat position fixed is. Daarin zit een input veld waar ik de z-index op 2 heb gezet. Net onder de body tag staat een div met een overlay over de gehele site met position absolute en z-index 1. Deze overlay komt overal overheen, ook over de input met een hogere z-index. Hoe komt dat en hoe kan ik hem alsnog erboven krijgen?

Voorbeeld code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div class="overlay"></div>
  <div class="header">
    <ul>
      <li>Lorem</li>
      <li><input type="text" placeholder="Search here"></li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </div>
  <div class="contentwrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus cursus odio nec sollicitudin. Aenean volutpat tristique tristique. Donec vitae libero vel sapien euismod egestas nec quis mi. Fusce semper lectus augue, cursus suscipit ex volutpat id. Donec interdum, sapien quis mollis sagittis, ligula turpis eleifend enim, a vulputate nibh est nec nibh. Nam tincidunt eleifend neque eget bibendum. Quisque diam leo, dapibus sit amet ipsum ac, auctor finibus erat. Morbi pulvinar imperdiet nibh, nec ullamcorper magna congue a. Mauris volutpat eget odio scelerisque sollicitudin. Maecenas odio dui, posuere eget orci dictum, ullamcorper ultricies leo. Vivamus risus dolor, viverra vel libero et, posuere tempus augue. Pellentesque a posuere arcu, a condimentum mi. Integer viverra rhoncus pretium. Morbi sit amet porttitor eros, non gravida dolor.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec purus lorem. Nulla vestibulum vestibulum est, ut sollicitudin diam maximus ac. Nulla suscipit sem eu efficitur placerat. Pellentesque vitae risus et velit iaculis ullamcorper. Phasellus venenatis iaculis leo in viverra. Nunc finibus dignissim libero at mattis. Aenean lacinia dapibus erat id varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in nunc ac lectus tempor cursus a sit amet dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

      Cras sed lectus molestie, ultrices diam in, scelerisque elit. Morbi viverra pulvinar nunc luctus venenatis. Quisque porttitor id magna vel tempus. Donec ultrices mi scelerisque blandit pretium. Curabitur et varius turpis, ut gravida risus. Nullam pharetra turpis lectus, eget aliquam elit mattis a. Donec vel hendrerit mauris. Proin auctor sagittis venenatis. Etiam semper purus eu velit feugiat vestibulum. Integer a ultrices ligula. Phasellus tincidunt dapibus magna vitae sodales. Integer at accumsan diam. Vestibulum a dolor tortor. Maecenas enim elit, semper ac sagittis nec, venenatis a felis. Duis ac congue risus. Pellentesque nisi turpis, mattis nec dictum quis, vehicula eu neque.

      Proin ultricies leo eget dolor consectetur imperdiet. Duis mattis at erat rutrum lobortis. Proin et turpis non velit consectetur egestas. Aenean rutrum, elit eget porttitor volutpat, est sem dapibus libero, vel tincidunt lectus risus ut nisi. Suspendisse ut ipsum luctus, mollis ipsum laoreet, sagittis purus. In augue turpis, euismod non vulputate quis, finibus a ligula. Donec suscipit, magna a euismod commodo, enim turpis molestie nunc, non porta purus nisl eu diam. Nam porta finibus elit, nec rhoncus est bibendum at. Nunc et tincidunt nibh. Aliquam mollis tortor nec erat suscipit, at elementum enim lobortis. Nullam augue nibh, porttitor ut vulputate ut, condimentum rutrum erat. Aliquam id euismod nisi.</p>
  </div>
</body>


CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgb(189 189 189 / 60%);
}

.contentwrap{
  height:2000px;
  position:relative;
}

.header{
  position:fixed;
  border:1px solid red;
  background-color:#fff;
}

.header ul{
  display: flex;
}
.header input{
  z-index:2;
}
Gewijzigd op 17/12/2020 11:21:18 door Snelle Jaap
 
PHP hulp

PHP hulp

23/04/2024 08:44:59
 
Ad Fundum

Ad Fundum

17/12/2020 11:01:58
Quote Anchor link
De z-index van de input van de header is relatief vanuit de header. Het header-element wordt vergeleken met de overlay. Wil je dat de header boven de overlay komt, dan moet je in de class header een z-index hoger dan 1 opgeven:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.header{
  z-index: 2;
}


P.S.: luistert is met een t.
Gewijzigd op 17/12/2020 11:04:17 door Ad Fundum
 
Snelle Jaap

Snelle Jaap

17/12/2020 11:21:09
Quote Anchor link
Ad Fundum op 17/12/2020 11:01:58:
De z-index van de input van de header is relatief vanuit de header. Het header-element wordt vergeleken met de overlay. Wil je dat de header boven de overlay komt, dan moet je in de class header een z-index hoger dan 1 opgeven:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.header{
  z-index: 2;
}


P.S.: luistert is met een t.

Oke maar wat als ik niet de gehele header boven de overlay wil maar alleen een element erin? De input in dit geval. Ik wil dat de hele header onder de overlay valt maar dat alleen de input er boven is te zien. Hoe doe ik dat?
 
Ad Fundum

Ad Fundum

17/12/2020 21:09:58
Quote Anchor link
Volgens mij kan je niet een html element via de z-index dwars door een tak van andere elementen heen gebruiken. Er moet rekening gehouden worden met de verschillende posities ten opzichte van elkaar. Zelfs display:flex; op het input-element zal niet helpen.

Onderstaande is technisch niet precies hetzelfde, maar het komt dicht bij met wat je vraagt. Door de header met een z-index: 2; boven de overlay te plaatsen, kan je alles behalve het input-element onzichtbaar maken:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
.header {
  z-index:2;
  visibility: hidden;
}
.header input {
  visibility: visible;
}

Als dit het niet is, zou ik een andere oplossingsrichting (met een andere volgorde van html elementen) kiezen.
Gewijzigd op 17/12/2020 21:23:35 door Ad Fundum
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.