z-index не работи на моя подсказка с въртележка

На въртележката в горната част на моя сайт използвам два вида подсказка. Първият е този, реализиран с въртележката, която използва този стил:

  #carousel div:hover span,
        #carousel div.hover span {
            background-color: #333;
            color: #fff;
            display: inline-block;
            width: 500px;
            padding: 2px 0;
            margin: 0 0 0 -500px;
            position: absolute;
            bottom: 0;
            left: 50%;
            border-radius: 3px;
            z-index: 600 !important;
        }

Това е сивото поле, както можете да видите с първото изображение, ако премине над обвивката div, ще го отреже. Въпреки че използвам z-index.

Вторият е този, който използва клас tooltip4:

.tooltip4:hover em {
z-index: 600;
text-align: center;
font-style: normal;
display: block;
position: absolute;
top: 50px;
left: 50px;
padding: 5px;
color: #fff;
/*border: 1px solid #bbb;*/
background-color:rgba(16,110,99,0.9);
box-shadow: 0 0 7px 2px #1B8478;
width:400px;    
}

Това е използвано на второто изображение и дори не можете да го видите, трябва да има ефект, подобен на въртележката вляво.

Моля, има ли решение на тези проблеми?


carousel html css hover tooltip
person Exia0890    schedule 09.07.2013    source източник

Отговори (2)


arrow_upward
1
arrow_downward 

#carousel div:hover span,#carousel div.hover span {margin: 0 0 0 -90px;}

премахнете z-index от този клас #carousel div

и редактирайте този клас

.tooltip4:hover em {top: -243px;left: -197px;}
person Abdul Malik    schedule 09.07.2013
comment
Благодаря за отговора, сега наистина мога да видя втория подсказка, но той все още ще бъде отрязан в долната част поради overflow: hidden. Ако е възможно, бих искал да се показва извън заглавката. - person Exia0890; 09.07.2013
comment
можете да използвате позиция: фиксирана за това и извън курса да промените горната и лявата стойност според вашите нужди - person Abdul Malik; 09.07.2013
comment
Благодаря много, работи. Но все още е отрязан с firefox. - person Exia0890; 09.07.2013

arrow_upward
0
arrow_downward

Мисля, че проблемът всъщност е, че сте поставили своя span в div.caroufredsel_wrapper, който има специфична ширина и височина, така че се отрязва извън това div. Ако поставите диапазона на по-високо ниво (например под body или може би header или div#wrapper), трябва да работи.

person Dave    schedule 09.07.2013
comment
Благодаря за отговора, ширината div.caroufredsel_wrapper изглежда е същата като тази wrapper. Причините, поради които не мога да видя подсказката, изглежда са поради препълването, но ако го направя видим с CSS: ще мога да видя подсказката, но изображенията също ще прелеят при плъзгане. Не знам как да поставя span на по-високо ниво, тъй като е за всяко изображение (освен ако не говорите за нивото на z-индекс). - person Exia0890; 09.07.2013