Position absolute problem with z-index

[AttilaEgyed]

Hello,

http://atiweb.org/others/bkl/

look at those images, the first row last image with the orange stuff, there is a little pink bird xD when you hover that image the bird becomse invisible cause of the banner.

how should i solve this?

[Scribblerockerz]

It’s really simple, -y-o-u- -c-a-n-‘-t- -(-w-i-t-h- -j-u-s-t- -c-s-s-)-!- ^^

Your container is set to “overfowl:hidden;” to hide the text below the title, and the bird is in the container. so.. you should give this brid more space and set it maybe directly in the body tag and set his position via JavaScript.
It’s easy cause you’re using already jquery.

In the and It would be a static tooltip of the container. (I hope you know what I mean).

@wolfcry911 is right, I was to fast in answering and to slow in thinking..

[wolfcry911]

you can do it with just css…

scribble is right about the overflow: hidden; causing the issue – but you need it for the effect your looking for. What you need to do is reserve some height above the initial pic for the bird, so that it won’t be hidden. So pad the .item 60px on top. Then increase the height by 60px (because your using border-box box sizing). And finally, and a negative 60px top margin to item to more or less hide the padding.

[howlermiller]

+1 to @wolfcry911. That’s a pretty clever solution.

And for yet another way to do it with just CSS, you can take the `overflow:hidden;` off of the `.item` div and put it on the `a` tag. That way only the part that you’re actually hiding is hidden. Here’s a quick pen to show you what I mean:

http://cdpn.io/EsqnI

[AttilaEgyed]

i found the problem a bit after i posted this, but here i found better solutions. my solution was this tho:

$(‘div.index’).on(‘mouseenter’, ‘.item’, function() {
var $this = $(this);
setTimeout(function() {
$this.addClass(‘ofVisible’);
}, 850);
$this.children(‘.info’).addClass(‘infoBottom’);
});

$(‘div.index’).on(‘mouseleave’, ‘.item’, function(){
var $this = $(this);
$this.removeClass(‘ofVisible’);
$this.children(‘.info’).removeClass(‘infoBottom’);
});

and yeah its not as yours.

+1 wolf and howl

http://atiweb.org/others/bkl/

[yeeyang]

Looks like you’ve got your solution.

z-indexing is typically handled on the parent level of your elements, so in your case, since the children of `#content` were showing up behind the children of `#slider`, your problem exists with those specific div siblings.

#slider { position: relative; z-index: 1; }
#container { position: relative; z-index: 2; }

[CSS-Tricks Video Screencast 40](https://css-tricks.com/video-screencasts/40-how-z-index-works/ “CSS-Tricks Video Screencast 40”)

[Author]

Posts