层叠上下文中，用z-index将div置于最前面

Question

我正在构建的页面中有一个产品轮播。

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

当鼠标悬停在产品上时，我想显示一些文字内容。

我是通过使用以下代码实现的：

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

这个div出现了（绿色），但我希望它向上偏移40像素。当我尝试使用“margin-top：-40px;”时，它被旋转木马DIV裁剪掉了。

我已经尝试过使用z-index，但无法将div置于所有内容的前面。

.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-->

- Nicolás Muiño

---

如多次要求：请提供一个jsfiddle版本的问题。您可以在http://jsfiddle.net/上将与您的问题相关的代码片段粘贴到三个字段中：HTML，CSS和JavaScript（或类似语言）。请在那里粘贴工作代码，并添加链接到您的帖子，以便我们帮助您 :) - Stefan Surkamp

这是 jsfiddle 的链接：http://jsfiddle.net/AbWYk/我想让绿色的 div 在所有元素之前，并向上偏移。 - Nicolás Muiño

这是一个棘手的问题。如果您从<div class="jcarousel-clip">和它的子元素<ul>中删除position: relative，则悬停将被定位而不被裁剪。但显然，jcarousel元素的相对定位对其功能至关重要。 - Astrotim

是的，这正是让我感到烦恼的原因。 - Nicolás Muiño

Answer 1

你不能给一个子元素设置比其父元素更高的z-index。

也许你需要将它放在一个额外的div/span中以满足你的需求？

编辑：

请参见http://jsfiddle.net/AbWYk/3/

代码：

.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;
}

- Stefan Surkamp

---

那真的没关系。您可以将其放在“某个地方”，设置 display: none（或使用负 z-index 将其隐藏在其他内容后面）。如果您想要显示产品信息（或类似内容），请设置 display: block 或增加 z-index。 - Stefan Surkamp

抱歉，伙计们，你们得忍耐一下，我不确定我是否理解你们的意思。难道我现在不是正在这样做吗？ - Nicolás Muiño

请查看我的编辑答案。我将所有的边距值放在一行中。它们按顺序处理（从上到下，从左到右）。 - Stefan Surkamp

只在小提琴上工作，但不在网站上工作。 - Nicolás Muiño

Answer 2

HOLA div 具有 position: absolute, 因此您可以使用 top:-40 将其向上移动 40 像素。我还建议您添加 pointer-events:none; 来防止闪烁。

@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-->

- nvioli

Answer 3

.item_carrousel_home:hover + .item_carrousel_home_on {

应该是：

.item_carrousel_home:hover, .item_carrousel_home_on {

- Pieter

---

尽管如此，您应该在display: block;之后填写一个闭合括号（}），否则其他所有内容都会被覆盖。也许这就是问题所在？ - Stefan Surkamp

顺便说一句：如果你使用了正确的CSS语法但是它根本没有显示出来（或者不像预期的那样），你应该真的提供一个简化的jsfiddle。这将有助于我们双方。 - Stefan Surkamp

只需按照我的指示替换代码，问题就会得到解决。请参考此链接：http://jsfiddle.net/AbWYk/1/ - Pieter

是的，绿色的 div 是具有高 z-index 值的那个。或者我误解了你的意思？ - Pieter

好吧，我们可以这样来回讨论下去......如果您不提供更完整的代码示例，那么您必须接受我们无法再为您提供帮助，只能自己尝试解决问题。 - Stefan Surkamp

Answer 4

据我所知，您需要在CSS代码中使用以下内容来利用z-index属性： position: absolute;

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

- P4T4R