Position: absolute, top: 0;, bottom: 0; not working

1

Hello good people!

So I was confident that i understood how positioning work in css, but now I am stuck and not even Google can help me.
What is going on here?

29-04_25_31

CSS

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: rgb(150, 73, 73);
    z-index: 1;
    height: 100px;
}

ul{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgb(84, 143, 196)
}

HTML

<nav>
            <ul id="links">
                <li id="home-link"><a href="#home">Home</a></li>
                <li id="shoes-link"><a href="#flex1">Shoes</a></li>
                <li id="contact-link"><a href="#contact">Contact</a></li>

                <li id="cart-link"><img id="cart-image" src="pictures/cart.svg" alt="Cart"></li>
                <li id="notification-link"><img id="notification-image" src="pictures/Rectangle 2.png"
                        alt="Notification"></li>
            </ul>
        </nav>
2

Hi,

In such case position property should be equal to relative.

1 Like
3

@timagixe Thanks for the quick answer!
But that doesn’t seem to work on the parent either. And i dont want to position the child as relative because i want to position it all the way to the top.

4

Ok, I missed one thing.

Your ul element has margin of 16px on top and bottom.

You have to set the position to relative and margin to 0 for your ul element in order to achieve what you want.

1 Like
5

@timagixe
Perfect!
Thanks my friend!