CODEWITHSUNDEEP
css
SilentCry
SilentCry

Reputation: 2092

css: z-index works unexpectably

on this webpage Voting System I have lunch pictures when you move mouse cursor over camera icon. Span which contains image have z-index 1000, tables have z-index 1, but images are showing under tables. Can you help me please? What's going wrong?

Upvotes: 0

Views: 45

Answers (2)

Nicolas Reynis
Nicolas Reynis

Reputation: 783

All your tables have z-index 1, therefore they are at the same level and source order will determine which tables get on top of the other if they ever get to overlap.

You're pictures may have a superior z-index, but they are contained by your table.

z-indexes are not global, they apply to a "stacking context". Everytime you add a z-index to an element (and some other css properties too, like opacity or transform in your case) this element create it's own stacking context for the children it contains.

Upvotes: 2

dragonloverlord
dragonloverlord

Reputation: 442

You are going to have to use different positioning. For example:

imageclass{
  position:absolute;
}

If you do not do that then your elements are positioned relative to the their parent element. Please include your code if this does not work as just looking at a web page is not enough to fully diagnose a problem.

Link to more info about positioning

Upvotes: 0

Related Questions