I have a very basic html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#nav {
height: 50px;
background-color: #333;
position: sticky;
top: 0;
}
#card {
position: relative;
background: linear-gradient(45deg, #f3ec78, #af4261);
min-height: 1200px;
}
</style>
</head>
<body>
<div id="nav"></div>
<div id="card"></div>
</body>
</html>My doubt raises when my sticky nav element is placed under my card element when scrolling, but I’m not really sure about the reason why this is happening.
Mainly because “position: relative” itself doesn’t create stacking context and I know that position: sticky creates a stacking context. I also know that my sticky element is working as expected the only problem is that is below the card element with relative position.
I asked chatGTP and it mentions something about layers that are not exactly the same as stacking context but I’m still pretty confused about it.
Does anyone has a logical explanation for this?
this happens in safari, chrome and firefox