2015-01-13 3 views
1

Это мой сайт: http://vani.valse.com.my/schone_lightings/index.php Я не хочу, чтобы тэг <hr> появлялся поверх текстового поля и отправлял кнопку под классом = «подписаться». Я попытался установить z-index выше для класса subscribe, но это не поможет!Как сделать hr тег невидимым в текстовом поле

HTML

<div class="hide-for-small-only hide-for-medium-only line_wrapper"><!--start of line bg div--> 
    <hr class="hr_tag"/> 
      <div class="row collapse"> 
       <div class="small-12 medium-12 large-6 large-centered columns subscribe"> 
        <div class="row collapse"> 
        <div class="small-12 medium-12 large-10 columns"> 
        <input type="text" value="" placeholder="Enter your email address for newsletter subscription"> 
        </div> 
        <div class="small-12 medium-12 large-2 columns"> 
         <input type="submit" value="SUBSCRIBE"> 
        </div> 
        </div> 
       </div> 
      </div> 
</div><!--end of line bg div--> 

CSS

.line_wrapper 
{ 
    margin-top:3%; 
    margin-bottom:3%; 
    position: relative; 

} 
.subscribe 
{ 
z-index: 60; 
} 

.subscribe input[type="submit"] 

{ 

    background-color:#000; 

    color:#fff; 

    border: 1px solid #000; 

    padding:10px; 

    height: 50px; 


} 

.subscribe input[type="text"] 

{ 



    color:#000; 

    padding:10px; 

    height:50px; 

} 
.hr_tag { 
    position: absolute; 
    z-index: 50; 
    top: 10px; 
    right: 0; 
    left: 0; 
} 
+0

где вы хотите 'hr' появляться? – jmore009

ответ

0

Первое, что применяется background line image сверху DIV и вы дали opacity:0.9 в row div. Итак, из-за этого фоновое изображение линии видно на textbox and button. Или вы можете удалить непрозрачность только для текстового поля и кнопки или удалить среднюю часть изображения вашей линии.

0

Удалить стиль для hr_tag как абсолютно позиционируемый элемент будет 'слой' выше регулярного статического контента.

/* position: absolute; */ 
/* z-index: 50; */ 
/* top: 10px; */ 
/* right: 0; */ 
/* left: 0; */ 
+0

Я хочу, чтобы он был там, где он сейчас, но просто не заметен в текстовом поле и не вводит кнопку. Я имею в виду, что индекс z должен быть меньше, чем у них. – Lana

0

Rmove рядный свойство Background-Image от

<div style="**background-image: url('img/line.png')**;background-repeat: repeat-x;z-index: 50;" class="line"><!--start of line bg div--> 
    <!--<hr class="hr_tag"/>--> 
      <div class="row collapse"> 
       <div class="small-10 small-centered medium-6 large-centered columns subscribe"> 
        <div class="row collapse"> 
        <div class="small-12 medium-12 large-10 columns"> 
        <input type="text" placeholder="Enter your email address for newsletter subscription" value=""> 
        </div> 
        <div class="small-12 medium-12 large-2 columns"> 
         <input type="submit" value="SUBSCRIBE"> 
        </div> 
        </div> 
       </div> 
      </div> 
</div> 
Смежные вопросы