Search code examples
csscompass-sass

CSS relative positioned text

I have a navigation bar with dropdowns on hovering. Just at the bottom of it, I have a relative positioned text. When hovering triggers on the navbar, the dropdown menu comes down, but instead of hiding the relative text, the text still shows above the dropdown.

I know I could trigger a hide() with jquery when hovering, but is there a pure CSS approach?

Solution

  • Positioned elements' (relative, absolute, and fixed) stacking order is set with z-index.

    Set z-index: 10 for the nav bar, and z-index: 5 for the text.

    Of course these numbers (5,10) are arbitrary, the important thing being that 5 < 10