Question

这是我的Fiddle。

我需要让文本框显示在滑块的中间。如果悬停，文本框不应受到影响。

我试过z-index:999但它没有用。

我看到了问题div not showing above text box 但它没有帮助我。

这是我的代码：

html：

<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>

css：

.view-fifth:hover img {
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
   transform: translateX(300px);
}

我该怎么做？

Answer 1

您可以为输入提供绝对位置：

<input type='text' style="z-index:999;position: absolute;top: 50px;left: 67px;">

小提琴：http://jsfiddle.net/Cv9DM/3/

Answer 2

你忘了指定位置：绝对。没有它＆＃34; z-index＆＃34;不起作用。

像这样解决：

HTML

<input type="text" class="above">

CSS

.above{
   z-index:999;
   position: absolute;
   left: 80px;
}

或者在这里： http://jsfiddle.net/Cv9DM/5/

Answer 3

你可以添加位置：相对于de输入。这样它就会保持原样

<input type='text' style="z-index:999; position: relative"/>

Fiddle

Answer 4

提供位置：绝对;在文本框样式

如何使滑块上方的文本框

4 个答案: