drop down menu
Hey, i'm trying to learn how to create a drop down menu for a nav link and i have a few questions
- i'm trying to center the drop down container in the middle of the
about link but left: -50%; doesn't quite do it for me, is this because the container is absolutely positioned in relation to the nav link therefore only moving it to the left half of the nav link? If this is the case would a transform be better?
- i've seen a few people do it this way so i tried it out here, the arrow is absolutely positioned in relation to the container which has also has a value of position: absolute;, does an absolutely positioned element in relation to another absolutely positioned element set the first element absolute to the second? it seems to work here but i'm not sure if that's good practice or is valid?
here's the codepen if it helps https://codepen.io/deerCabin/pen/abPoNoo, thanks in advance12 Replies
Little secret for you, to center with absolute and relative positioning. Left 50% and transform translateX -50%
Beat me to it https://codepen.io/vince1444/pen/vYvBGLx
To center vertically and horizontally (not useful for this case but sometimes useful in general), left 50% top 50% and transform translate -50% -50%
Haha it's a very useful little tidbit of knowledge
For your second question, I believe a position: absolute element will position itself relative to its nearest positioned (position property is something other than
static) ancestor. See: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm not really sure what you mean by "does an absolutely positioned element in relation to another absolutely positioned element set the first element absolute to the second?". If I understand, and element X is a child of element Y - and they are both position absolute - then I believe element X should be positioned relative to element Y.That is correct in my experience, yes.
And it's also fine practice
ahhh i see how that all works now 😄, i appreciate the help guys. could i ask how
Left 50% and transform translateX -50% works?I confirmed this in the codepen, just updated https://codepen.io/vince1444/pen/vYvBGLx
When you transform: translate(%, %), it translates by the percentage of the element's own width/height.
When you use top/left/bottom/right properties, the percentages are based off the parent's dimensions
Haha it's so cool actually how it works. Pretty clever solution
ah yeah i see. i'll try to explain it in the context.. the drop down container is an absolutely positioned element of the nav link and the arrow on top of the container is an absolutely positioned element of the container. so since they both have
position: absolute; on them, i was wondering if the arrow would be absolutely positioned to the container and if that's good practice.
yeah it really is
ayy thanks for the explanation, and all of the codepens!👍
Yup that seems to be the case 🙂 👍
ah cool, i'm glad