I am currently trying to create a landing page for a photoshop layout. I am quite new to HTML and CSS and I am having trouble solving this. My drop-down menu lists are getting covered by the content. I think it might be about positioning… Thanks
I will attach a picture and I will also share my code if needed…
Dropdown menu getting covered by content (positioning) IMAGE
4
Answers
Just but
z-index:999;
on your dropdown.Objects with higher
z-index
number will go above those with lower numbers.As previously stated you can use
z-index
to determine how elements are rendered on top of each other. Elements with an higherz-index
are on top of elements with a lowerz-index
.According to the MDN docs:
Add the CSS attribute
z-index: 999;
to your dropdown’s CSS. Not necessarily should it be999
, but just that999
is the maximum one can use inz-index
.The property of
z-index
is that a division with a higherz-index
will be displayed above a division with a lower number in thez-index
, therefore allowing you to decide the hierarchy of the appearance of different divisions.To know more, visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
If
z-index
is not solved, you can check nav container and if you foundoverflow-y
you can comment that line.