div in front of everything with z-index

Question

I have this carousel of products in a page I'm building.

http://flytango.com.ar/test/home-publico.html

When hovering the product, I'd like to show a div with some text.

I'm achieving this by using

.item_carrousel_home:hover + .item_carrousel_home_on {
    display: block;
}

The div shows up (in green) but I want it to be offset 40px up. So when i try "margin-top:-40px; it gets cut off by the carousel DIV.

I've tried with z-index, but I can't bring the div in front of everything.

.item_carrousel_home:hover + .item_carrousel_home_on {
    display: block;
.item_carrousel_home_on {
    width:220px;
    height:130px;
    background-color:#00FF00;
    color:#FFFFFF;
    display:none;
    position:absolute !important;
    z-index:999999 !important;
    margin:0px;
    margin-left:20px;
    margin-top:-40px !important;
}

<div id="carrousel_home">
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li>
        <a href="#" class="item_carrousel_home"><img src="imagenes/cellactive.jpg"      alt="Cellactive" width="155" height="200" border="0" />
        <br />Nombre Producto
        <br />en dos lineas</a>
        <div class="item_carrousel_home_on">HOLA</div>
    </li>
  </ul>
</div><!--fin del carrousel-->

Answer 1

Since the HOLA div has position: absolute, you can use top:-40 to move it up 40px. I also suggest you add pointer-events:none; to stop the flickering.

@font-face {
    font-family:'Helvetica';
    src: url('fonts/helvetica2.eot');
    src: url('fonts/helvetica2.eot?#iefix') format('embedded-opentype'), url('fonts/helvetica2.woff') format('woff'), url('fonts/helvetica2.ttf') format('truetype'), url('fonts/helvetica2.svg#helvetica2') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Arial Narrow, sans-serif;
    font-stretch: condensed;
    font-size:18px;
    color:#828282;
    font-weight:bold;
    background-image:url(imagenes/bg.jpg);
    background-repeat:repeat-x;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #F6F6F6;
    text-align:center;
}
a:link {
    text-decoration: none;
    color:#666666;
}
a:visited {
    text-decoration: none;
    color:#666666;
}
a:hover {
    text-decoration: none;
    color:#000000;
    text-decoration:underline;
}
a:active {
    text-decoration: none;
    color:#666666;
}
/** COLORES **/
 .negro {
    color:#000000;
}
.gris {
    color:#CCCCCC;
}
.rojo {
    color:#ED1C2F;
}
/** **/
 #contenedor {
    width:940px;
    height:500px;
    margin:auto;
    position:relative;
}
#header {
    width:940px;
    height:147px;
    float:left;
    background-image:url(imagenes/shadow_940.png);
    background-repeat:no-repeat;
    background-position:center bottom;
    padding-bottom: 85px;
    position:relative;
    z-index:99999;
}
#barra_header {
    width:910px;
    height:23px;
    border:1px solid #CCC;
    border-top:0px;
    float:left;
    font-size:14px;
    font-style:normal;
    text-align: left;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 15px;
}
#idiomas_header {
    float:left;
}
.banderita_header {
    margin-right:7px;
}
#universo_prof_header {
    float:right;
    height: 28px;
    background-image: url(imagenes/flecha_header.jpg);
    background-repeat: no-repeat;
    background-position:56% 0%;
    margin-top:-5px;
    padding-top:5px;
}
#universo_prof_header a:link {
    font-style:normal;
    color:#828282;
}
.flecha_universo_prof_header {
    margin-left:10px;
    margin-right:10px;
    margin-top:8px;
}
.logo {
    margin-top:15px;
    float:left;
}
#menu-header {
    width:940px;
    float:left;
    position:absolute;
    left:-3px;
    top:97px;
    z-index:9999 !important;
}
#slider {
    width:940px;
    height:368px;
    float:left;
    padding:0px;
    margin:0px;
    left:0px;
    margin-top:-45px;
}
#destacados_home {
    font-family:'Helvetica', Arial Narrow;
    font-size:40px;
    text-shadow: 0px 3px #FFFFFF;
    font-weight:normal;
    font-style: normal;
    width:940px;
    height:50px;
    color:#808080;
    float:left;
    margin-top: 70px;
    background-image: url(imagenes/linea_destacados.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
#carrousel_home {
    width:940px;
    background-color:#FFFFFF;
    float:left;
    margin-top: 40px;
    border: 1px solid #CCC;
    margin-bottom: 50px;
    padding-bottom: 20px;
    padding-top: 10px;
}
.item_carrousel_home {
    width:155px;
    float:left;
    margin-left:10px;
    margin-right:10px;
    font-size: 19px;
    color: #4f4f4f;
    line-height: 19px;
}
.item_carrousel_home:hover {
    color:#FF0000;
    text-decoration:none;
}
.item_carrousel_home_on {
    width:220px;
    height:130px;
    background-color:#00FF00;
    color:#FFFFFF;
    display:none;
    position:absolute !important;
    z-index:999999 !important;
    margin:0px;
    margin-left:20px;
    top:-40px;
    pointer-events:none;
}
.item_carrousel_home:hover + .item_carrousel_home_on {
    display: block;
}
.jcarousel-skin-tango .jcarousel-container {
    background: #FFF;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 920px;
    height:240px;
    padding-left:15px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 920px;
    height: 275px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width: 75px;
    height: 245px;
}
.jcarousel-skin-tango .jcarousel-item {
    width: 172px;
    height: 275px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
/**
 *  Horizontal Buttons
 */
 .jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 100px;
    right: -50px;
    width: 32px;
    height: 50px;
    cursor: pointer;
    background: transparent url(../imagenes/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../imagenes/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 100px;
    left: -48px;
    width: 32px;
    height: 50px;
    cursor: pointer;
    background: transparent url(../imagenes/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(../imagenes/next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

<div id="carrousel_home">
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><a href="#" class="item_carrousel_home"><img src="imagenes/cellactive.jpg" alt="Cellactive" width="155" height="200" border="0" /><br />Nombre Producto<br />
en dos lineas</a>

            <div class="item_carrousel_home_on">HOLA</div>
        </li>
    </ul>
</div>
<!--fin del carrousel-->

Answer 2

You cannot give a child a higher z-index than it's parent.

Maybe you have to put it in an extra div/span to fit you needs?

EDIT:

See http://jsfiddle.net/AbWYk/3/

code:

.item_carrousel_home_on {
    width:220px;
    height:130px;
    background-color:#00FF00;
    color:#FFFFFF;
    display:none;
    position:absolute !important;
    z-index:999999 !important;
    margin:-80px 0 0 0;
}

Answer 3

As far as I know, you need to use:

position: absolute;

in the CSS code to utilize the z-index property.

http://w3schools.com/css/css_positioning.asp

Answer 4

.item_carrousel_home:hover + .item_carrousel_home_on {

Should be:

.item_carrousel_home:hover, .item_carrousel_home_on {