Estoy tratando de imitar un diseño en el que tengo que agregar un patrón sobre el degradado lineal. He usado ::before elemento para hacer eso.
Pero ahora el ícono de la hamburguesa y los enlaces no funcionan. Cuando inspecciono el sitio en la ventana gráfica móvil, muestra que el cuerpo cubre toda el área. Intenté jugar con los eventos de índice z y puntero, pero no pude cumplir con las expectativas. ¿Hay alguna forma de arreglar esto?
const menuBtn = document.querySelector('.hamburger'); menuBtn.addEventListener('click',()=>{ menuBtn.parentElement.classList.toggle('open'); console.log('button clicked') }); body{ min-height: 100vh; font-size: 1rem; text-align: center; z-index: 0; } header{ min-height: 85vh; background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%)); border-bottom-left-radius: 6rem; padding: 3rem 1.5rem; position: relative; overflow: hidden; z-index: -2; } header::before{ position: absolute; content: ''; top: 5rem; left: 8rem; width: 100%; height: 100%; background: url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg) no-repeat; background-size: 100% 100%; transform: scale(3); z-index: -1; } header nav{ display: flex; justify-content: space-between; align-items: center; } nav .logo{ max-width: 80px; } nav .nav-links,nav .login-section{ display: none; } nav .menu{ width: 2rem; display: flex; align-items: center; cursor:pointer; } .menu .hamburger{ max-width:40px; cursor:pointer; } header .text-content{ max-width: 300px; margin: 0 auto; } <header> <nav> <img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo"> <div class="menu"> <img src="https://cutt.ly/TK0EzcH" class="hamburger"> </div> </nav> <div class="text-content"> <h1>A header is here</h1> <p>lorem10</p> <div class="header-links"> <a href="www.google.com">Some links</a> <a href="www.youtube.com">Some links</a> </div> </div> </header>Has establecido la propiedad z-index: -3; al encabezado y z-index: -1; a su pseudo elemento ::before . Está claro que el header tiene z-index más pequeño que su pseudo elemento.
Así que ::before tiene un mayor orden de pila que el de header . Debido a esa razón, ::before está al frente del header , que tiene un orden de pila más bajo que su elemento pesudo.
const menuBtn = document.querySelector('.hamburger'); menuBtn.addEventListener('click',()=>{ menuBtn.parentElement.classList.toggle('open'); console.log('button clicked') }); body{ min-height: 100vh; font-size: 1rem; text-align: center; z-index: 0; } header{ min-height: 85vh; background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%)); border-bottom-left-radius: 6rem; padding: 3rem 1.5rem; position: relative; overflow: hidden; z-index: 0; } header::before{ position: absolute; content: ''; top: 5rem; left: 8rem; width: 100%; height: 100%; background: url("https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg") no-repeat; background-size: 100% 100%; transform: scale(3); z-index: -1; } header nav{ display: flex; justify-content: space-between; align-items: center; } nav .logo{ max-width: 80px; } nav .nav-links,nav .login-section{ display: none; } nav .menu{ width: 2rem; display: flex; align-items: center; cursor:pointer; } .menu .hamburger{ max-width:40px; cursor:pointer; } header .text-content{ max-width: 300px; margin: 0 auto; } <header> <nav> <img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo"> <div class="menu"> <img src="https://cutt.ly/TK0EzcH" class="hamburger"> </div> </nav> <div class="text-content"> <h1>A header is here</h1> <p>lorem10</p> <div class="header-links"> <a href="www.google.com">Some links</a> <a href="www.youtube.com">Some links</a> </div> </div> </header>Tenga cuidado al usar position: relative/absolute , no están en el flujo normal, por lo que su comportamiento es "como un fantasma". En el ejemplo:
las propiedades de position se eliminan
el pseudo-elemento header::before es eliminado
las propiedades de fondo de header::before se han fusionado con las propiedades de fondo en header
background-image: /* Top */ url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg), /* Bottom */ linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%)); background-repeat: no-repeat, repeat; background-size: 150% 150%, cover; Tenga en cuenta que la propiedad de background abreviada no se usa aquí. Cada valor está separado por una coma. Ver este artículo para más detalles
const menuBtn = document.querySelector('.hamburger'); menuBtn.addEventListener('click', () => { menuBtn.parentElement.classList.toggle('open'); console.log('button clicked') }); body { min-height: 100vh; font-size: 1rem; text-align: center; } header { min-height: 85vh; background-image: url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg), linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%)); background-repeat: no-repeat, repeat; background-size: 150% 150%, cover; border-bottom-left-radius: 6rem; padding: 3rem 1.5rem; overflow: hidden; } header nav { display: flex; justify-content: space-between; align-items: center; } nav .logo { max-width: 80px; } nav .nav-links, nav .login-section { display: none; } nav .menu { width: 2rem; display: flex; align-items: center; cursor: pointer; } .menu .hamburger { max-width: 40px; cursor: pointer; } header .text-content { max-width: 300px; margin: 0 auto; } <header> <nav> <img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo"> <div class="menu"> <img src="https://cutt.ly/TK0EzcH" class="hamburger"> </div> </nav> <div class="text-content"> <h1>A header is here</h1> <p>lorem10</p> <div class="header-links"> <a href="www.google.com">Some links</a> <a href="www.youtube.com">Some links</a> </div> </div> </header>