2014-01-07 4 views
2

У меня есть таблица, в которой у каждой ячейки есть текст. Я хочу, чтобы div всплывал и закрывал таблицу, но когда появляется всплывающее окно, оно покрывает границы таблицы, но не текст. Похоже, что текст только на div. Я играл с фоновым цветом и непрозрачностью, но ничего не работает. Может кто-нибудь мне помочь?Текст, проходящий через перекрывающийся div?

P.S. В любом случае я не могу заставить таблицу исчезнуть, потому что перекрывающий div исчезнет в конце концов.

+4

Вы всегда должны размещать свой код или, по крайней мере, пытаться воссоздать проблему на сайте jsfiddle или CodePen. – Schmalzy

+0

JSFIDDLE PLZZZZZZZ ДОРОГОЙ –

ответ

2

Поскольку вы не отправлял свой код, я буду считать, что проблема как-то связана с

z-index:*; 

поэтому я создал скрипку, где вы можете изменить Z-индекс и увидеть разницу, что делает использование этого кода.

<html> 
<head> 
<style> 
p{ 
    margin:0; 
    position:relative; 
    z-index:3; 
} 
table, div{ 
    width:100px;  
    height:100px; 
} 
div{ 
    background-color:blue; 
    position:relative; 
    top:-100px; 
    z-index:2; 
} 
</style> 
</head> 
<body> 
<table border="1"> 
    <tr> 
     <td><p>1</p></td> 
     <td><p>2</p></td> 
    </tr> 
    <tr> 
     <td><p>3</p></td> 
     <td><p>4</p></td> 
    </tr>  
</table> 
</body> 
</html> 

JsFiddle

Заметим, что для г-индекс рабочее положение должен быть установлен, как этот

position:relative; 

или

position:absolute; 

или

position:fixed; 

хотя я не думаю, что исправление может соответствовать вашим потребностям.

0

Ваш вопрос не очищается.

В любом случае, я надеюсь, что это то, что у просил ...

HTML

<table cellspacing="0"> 

    <tr> 
     <td>Hellossss 
      <span></span> 
     </td> 
     <td>English 
      <span></span> 
     </td> 
     <td>French 
      <span></span> 
     </td>   

    </tr> 




</table> 

CSS

table td{ border:3px grey solid; padding:0px; position:relative; width:100px} 
span{content:"";position:absolute; width:100%;height:98%; background:green; 
left:0;top:0; display:none} 
td:hover span{display:block} 

http://jsfiddle.net/edBQh/

Смежные вопросы