如何使文本框在滑块上方 [英] How to make the textbox above the slider

问题描述

这是我的小提琴。

我需要使文本框显示在滑块的中间。

我试过 z-index：999 但它没有工作。

我看到了 div不显示上面的文本框
但它没有帮助我。

这是我的代码：

html：

 < div class =mask> 
< h2>悬停样式＃5< / h2> 
< p>一个美好的宁静已经占据了我的整个灵魂，像这种甜美的春天，我喜欢与我的整个心。 
< a href =＃class =info>阅读更多< / a> 
< / div> 
  

css：

 code> .view-fifth：hover img {
 -webkit-transform：translateX（300px）; 
 -moz-transform：translateX（300px）; 
 -o-transform：translateX（300px）; 
 -ms-transform：translateX（300px）; 
 transform：translateX（300px）; 
} 
  

我该如何做？

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

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

Here is my Fiddle.

I need to make the textbox to be displayed on the middle of the slider. The textbox should not get affected if hover.

I tried z-index:999 But it didn't worked.

I saw the questions div not showing above text box But it didn't helped me.

Here is my code :

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

How can i do this ?

解决方案

You can give position absolute for the input :

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

Fiddle : http://jsfiddle.net/Cv9DM/3/

这篇关于如何使文本框在滑块上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！