如何在滑块上方制作文本框答案

【问题标题】：How to make the textbox above the slider如何在滑块上方制作文本框
【发布时间】：2014-07-18 15:17:35
【问题描述】：

这是我的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);
}

我该怎么做？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

在我与“在 jsfiddle 之前放置一些代码...”作斗争时将其发布在我面前 :)
按预期工作，非常感谢.. !!.. 但如果我将它放在两个滑块中，它就不起作用了。我将在一个单独的问题中提出。

【解决方案2】：

您只是忘记指定位置：绝对。没有它，“z-index”就不起作用。

这样解决：

HTML

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

CSS

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

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

【讨论】：

【解决方案3】：

您可以添加位置：相对于输入。这样它会保持原来的位置

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

Fiddle

【讨论】：

【解决方案4】：

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

【讨论】：