Así que estoy construyendo este sitio frontendmentor y tengo problemas para colocar el div del carrito de compras encima del resto de los elementos. Al principio intenté usar z-index pero aparentemente eso no funciona con elementos que tienen un estilo de posición. Usé la posición relativa en el padre y absoluta en el hijo para que siempre apareciera debajo del ícono del carrito de compras. ¿Hay alguna otra forma de forzar un elemento en la parte superior o debería cambiar la forma en que posiciono el div?
.right-container { padding: 1rem; } .account-container { display: flex; align-items: center; position: relative; } .cart-icon-container { margin-right: 2rem; } .cart-icon-container img { height: 30px; width: 30px; aspect-ratio: 1; } .shopping-cart-overlay { position: absolute; top: 5rem; right: 100px; width: 400px; border-radius: 10px; box-shadow: 0 1rem 10px rgba(0, 0, 0, 0.185); } .shopping-cart-content { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; } <div class="right-container"> <div class="account-container"> <div class="shopping-cart-overlay"> <div class="shopping-cart-header"> <h4>Cart</h4> </div> <div class="shopping-cart-content"> <p>Your cart is empty</p> </div> </div> <a href="/index.html" class="cart-icon-container"> <img src="./images/icon-cart.svg" alt="cart"> </a> <img class="avatar" src="./images/image-avatar.png" alt="profile-pic"> </div> </div>Bueno, funciona. Lea esto para comprender mejor cómo funciona z-index con position . Simplemente no podías notarlo porque el div era transparente.
Echa un vistazo al fragmento a continuación. Es su código exacto, pero cambié el background y coloqué el .shopping-cart-overlay más cerca de los otros elementos, solo para mostrarle que realmente funciona.
.right-container { padding: 1rem; } .account-container { display: flex; align-items: center; position: relative; } .cart-icon-container { margin-right: 2rem; } .cart-icon-container img { height: 30px; width: 30px; aspect-ratio: 1; } .shopping-cart-overlay { position: absolute; //top: 5rem; //right: 100px; width: 400px; border-radius: 10px; box-shadow: 0 1rem 10px rgba(0, 0, 0, 0.185); /* Changes */ top: 0; left: 125px; z-index: 99; background-color: red; } .shopping-cart-content { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; } <div class="right-container"> <div class="account-container"> <div class="shopping-cart-overlay"> <div class="shopping-cart-header"> <h4>Cart</h4> </div> <div class="shopping-cart-content"> <p>Your cart is empty</p> </div> </div> <a href="/index.html" class="cart-icon-container"> <img src="./images/icon-cart.svg" alt="cart"> </a> <img class="avatar" src="./images/image-avatar.png" alt="profile-pic"> </div> </div>