Question

I have an HTML code with an error at some point that I cannot detect. Here is my JSFiddle.

In particular, when I move on “Show more”, an absolute positioned div with highest z-index should be shown on top of everything. However, as you may see the first absolute positioned div is shown under other content.
As provided in answers from similar questions, I already set a z-index value and the position type (absolute or relative) for each container of the div.

Any idea to solve this problem?

Answer 1

Thanks to Ghost Answer comment, I solved the problem.

In other answers I read that one should put an increasing z-index value as well a position:relative to all the containers of a div that one would show on hover. Maybe it isn’t always true.
Here is what I did:

1. I removed all the z-index values and unnecessary positioning (I suppose the latter is not meaningful).
2. I set z-index:auto to the container of the div that I would to show on hover.

Now the code works fine: this is the updated JSFiddle.