I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting
top: -{height-of-another-element-wrapping-it}Let me provide some code snippets (not the complete code due to complexity) to illustrate the HTML and CSS setup:
<nav>
<section>
<ul>
<li>
<ul class="i-want-to-use-top-here"></ul>
</li>
</ul>
</section>
</nav>
nav {
height: 60px;
}
.i-want-to-use-top-here {
height: 200px;
position: absolute;
top: -100%;
}
Why is this happening? How can I accurately get -100% of the element's height to utilize in the top property?