代码之家 › 专栏 › 技术社区 › Kyle

如何强制使用z索引?

z-index tooltip css

Kyle · 技术社区 · 15 年前

论 euroworker.no/order (用kjp和handlevogn添加一些东西到购物车中)。

我有一个工具提示,当您悬停产品名称时显示产品的图片,出于某种原因,它显示在名称的上方,但在其他元素(如行和其他产品名称)的下方。

z-index已设置为网站此部分的最高可用索引999;。没有比这更高的索引了。

JSFiddle of the tooltip code here 。

另外,如何让工具提示显示在中间?我试过了 right:50%; 但我想那是不对的。

谢谢。

注意:我知道我需要将一些ID更改为类:)

2 回复 | 直到 15 年前

phimuemue 15 年前

如果设置以下值,则可以将其居中:

width: 130px;
left: 50%;
margin-left: -65px; /* since the half of 130 is 65*/

背景稍长一点:

Html:

<div id="JSwrap">

<div id="cart2Produkt">


<p>
    <a href="/Target-7050-Softphone-USB-Duo.220" target="_blank" class="tooltip" title="Target 7050 Softphone USB Duo ">

        <div class="back" ><img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg?1251413379" alt="Target 7050 Softphone USB Duo " />
            <br />

        </div>

        Target 7050 Softphone USB Duo


    </a>
</p>

    <p>

    </p>
</div>
</div>

Css:

#JSwrap{ /*for jsfiddle only*/
    position:absolute;
    left:100px;
    top:50px;
}

#cart2Produkt {
    /*z-index: 2000;*/
}

#cart2Produkt a.tooltip .back {
    z-index:999;
    display:block;
    position:absolute;
    left:-999px;
    opacity:0;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
}

#cart2Produkt a.tooltip:hover .back{
    z-index:-1;
    display:block;
    position:absolute;
    left:15px;
    opacity:1;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
    top:-35px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    vertical-align:middle;
    padding:1px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;

}

#cart2Produkt img {
    z-index:999;
}

我在你的网站上试用过,效果很好。

ryanulit 15 年前

不确定这是否是问题的错别字,但Z索引没有设置像素。应该是:

z-index: 999;

推荐文章

Kyle Lemon · 突出显示页脚背景和内容之间的跨距

7 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

7 年前

Nick · 浮动操作按钮z索引更改延迟

7 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

7 年前

norixxx · 当父内容将图像作为子内容,并且其他元素具有不透明度时,CSS堆栈顺序会发生变化

7 年前

assoonaspossible · 具有固定父元素的绝对定位元素上的z索引[重复]

7 年前

Ismail Rubad · z索引为1的元素位于祖父母的div下

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Tog Porter · 如何让图像滚动到导航栏后面

7 年前

Jasminder Pal Singh · 复杂的Z指数叠加问题

7 年前