skip to Main Content

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


  1. Just but z-index:999; on your dropdown.

    Objects with higher z-index number will go above those with lower numbers.

    Login or Signup to reply.
  2. As previously stated you can use z-index to determine how elements are rendered on top of each other. Elements with an higher z-index are on top of elements with a lower z-index.

    According to the MDN docs:

    The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

    Login or Signup to reply.
  3. Add the CSS attribute z-index: 999; to your dropdown’s CSS. Not necessarily should it be 999, but just that 999 is the maximum one can use in z-index.

    The property of z-index is that a division with a higher z-index will be displayed above a division with a lower number in the z-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

    Login or Signup to reply.
  4. If z-index is not solved, you can check nav container and if you found overflow-y you can comment that line.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search