Z indexing

HTML & CSS
1

I can’t figure out how to make the element that falls down when you hover over these 3 circles appear above the rest of the content instead of underneath it.

I’ve tried z indexing but it doesn’t seem to work:

http://www.muslimahwebdesign.co.uk/wofwt2/our-offerings/

2

The nesting level of the HTML matters when factoring in z-index layering.

The easiest way would be to give position:relative and z-index:1; (at least 1; it needs a z-index because if left to “auto”, the orange button is later in the source and will be on top) to “.ch-grid”.

1 Like
3

As @RyanReese said the element nested inside or coming later in code has a higher in flow stacking level. Also, z-index can only affect elements that’s been given a position value other than static.

You can also try raise the stacking level for only the element that is hovered.

.ch-item:hover {
  position:relative;
  z-index:1;
}
1 Like
4

I see. So we can position relative on anything without referencing anything else around it? I mean how does it know what it is being relative to?

I noticed that it is ontop ( on hover ) as per the code but when you stop hovering and it starts making it’s way back up the words underneath then appear ontop. So I tried to give a possition relative of -1 the the call out box but obviously that’s wrong, it didn’t work and I tried to give the position relative of 1 to the .ch-item only without the hover but that didn’t seem to work either

5

Assigning {position:relative} to a selector does not make it relative to an outer container; it makes that selector the object to which inner {position:absolute} items are relative.

I didn’t see any “text showing through” after hover.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.