Блог

Я играю с css с вкладками из http://css-tricks.com/examples/CSSTabs /:

Пример шестой

 .w3c { min-height: 250px; position: relative; width: 100%; }
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
.w3c > div:target > a { background: white; }    
.w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
.w3c > div:not(:target) > div { position: absolute }
.w3c > div:target > div { position: absolute; z-index: -1; }
  

Это создает область с вкладками, но ничто из того, что я помещаю внутрь вкладки, не поддается манипулированию: я не могу выделить, я не могу создать ссылку. Я не уверен, что происходит полностью, просто выбрал этот пример, потому что он лаконичен. Может ли какой-нибудь эксперт по css объяснить, почему я, похоже, ничего не могу с этим поделать.

Примечание: это идеально подходит для моих нужд, за исключением того, что я не могу поместить во вкладки ничего, кроме обычного текста.

Измените z-index последнее правило на 0 , и вы снова сможете взаимодействовать с содержимым вкладки:

 .w3c > div:target > div { position: absolute; z-index: 0; }
  

Отрицательное значение z-index означает, что все, что имеет нулевое или положительное значение, z-index будет перекрывать вкладку. Одной из таких вещей вполне может быть страница body , что затем приводит к «отключению» содержимого вкладки.