Я хочу, чтобы переключаемый элемент div перекрывал нижележащий контент с z-index. Как мне этого добиться? - PullRequest
Новая
       11

Я хочу, чтобы переключаемый элемент div перекрывал нижележащий контент с z-index. Как мне этого добиться?

0 голосов
/ 15 апреля 2009

У меня есть короткий вводный текст внутри поля, если пользователь хочет читать дальше, он может переключать скрытый элемент div, который показывает остальную часть содержимого. Под этим вводным блоком у меня есть другой элемент, который я всегда хочу оставаться в этой позиции. Я хочу, чтобы переключаемый текст «показывал над» фиксированным содержимым, и я не хочу, чтобы он нажимал вниз, когда открываемый переключаемый div Я экспериментировал с различными значениями z-index, абсолютным и относительным позиционированием, но безрезультатно. Есть ли чистое решение на основе CSS для этого? Пожалуйста помоги! Вот демонстрация того, что я пытаюсь сделать: 

> <!DOCTYPE html PUBLIC "-//W3C//DTD
> XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html
> xmlns="http://www.w3.org/1999/xhtml"
> xml:lang="en"> <head>     <style
> type="text/css">      .container{width:
> 400px;
>                   height: 500px;
>                   border: 1px dashed #999; 
>                   }       div.container{padding:0; margin:0}                  #morecontent{
>               z-index: 100    
>               }       #morecontent,.introcontent{background: #DFFAFF;}                div#fixedcontent{background:
> #FFDFDF;
>                       z-index: -1;
>                       position: absolute; 
>                       width: 400px
>                       }           </style> <title>Toggle overlap - test</title> </head> <body>
>   <div class="container">         <div id="">
>       <script type="text/javascript">
>                               function toggle(obj){
>                               var el=document.getElementById('morecontent');
>                                   if (el.style.display !='none'){
>                                           el.style.display='none';
>                                       }
>                                       else {el.style.display='';
>                                               }
>                               }
>                                   </script>
>               <p class="introcontent">Lorem ipsum dolor sit amet, consectetur
> adipiscing elit. Aenean in pede congue
> ipsum sollicitudin pellentesque. Nunc
> t tortor dolor, sagittis nec, placerat
> vel, commodo sed, nunc. Vivamus
> bibendum molestie orci. Duis nec leo
> at libero fermentum molestie. Nam eu
> risus.<br /> 
>               There's more if you press toggle...
>               
>                                           </p>
>                       <a href="JavaScript: toggle(this)">Toggle</a>                   
>                   <div id="morecontent" style="display:none;">
>                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in
> pede congue ipsum sollicitudin
> pellentesque. Nunc t  tortor dolor,
> sagittis nec, placerat vel, commodo
> sed, nunc. Vivamus bibendum molestie
> orci. Duis nec leo at libero fermentum
> molestie. Nam eu risus.
>                                           </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Aenean in pede congue ipsum
> sollicitudin pellentesque. Nunc
> t tortor dolor, sagittis nec, placerat
> vel, commodo sed, nunc. Vivamus
> bibendum molestie orci. Duis nec leo
> at libero fermentum molestie. Nam eu
> risus.
>                                           </p>
>                       </div>
>                       
>                       <div id="fixedcontent">
>                       <p>This should stay 'under' the toggled content!</p>
>                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in
> pede congue ipsum sollicitudin
> pellentesque. Nunc t  tortor dolor,
> sagittis nec, placerat vel, commodo
> sed, nunc. Vivamus bibendum molestie
> orci. Duis nec leo at libero fermentum
> molestie. Nam eu risus.
>                                           </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Aenean in pede congue ipsum
> sollicitudin pellentesque. Nunc
> t tortor dolor, sagittis nec, placerat
> vel, commodo sed, nunc. Vivamus
> bibendum molestie orci. Duis nec leo
> at libero fermentum molestie. Nam eu
> risus.
>                                           </p>
>                           </div>              </div>          </div>      </body> </html>

Ответы [ 4 ]

1 голос
/ 09 мая 2009

Я не вижу, как перемещение z-индекса лучше / эффективнее, чем скрытие и отображение содержимого путем изменения атрибута display в div. Есть ли какая-то причина, по которой вы хотите, чтобы весь контент на странице был всегда?

1 голос
/ 15 апреля 2009

Что-то, что я сделал в прошлом:

Разделите ваш контент на две части. Один диапазон отображается, а другой скрыт. Когда пользователь захочет увидеть остальную часть контента, покажите другой промежуток с остальным текстом.

Я использую команду JQuery toggle (), чтобы сделать это проще.

0 голосов
/ 09 мая 2009

Попробуйте: 

#container { position: relative; }
#more { position: absolute; display: none; background-color: White;}

<div id="container">
    Lorum <a href="#">click for more</a>
    <div id="more">
       Lorum
    </div>
    <div id="under">
        Underneath text
    </div>
</div>

В случае 'click for more' установите #more на display: block;

В этом случае подразумевается z-индекс, поскольку #more предшествует #under в дереве документа и, следовательно, имеет более высокий z-индекс

0 голосов
/ 15 апреля 2009

Полагаю, вы тестируете только с IE. Firefox не имеет этой проблемы.

Это известная ошибка в IE, ошибка z-index

Является ли z-index единственным способом заставить элемент располагаться поверх другого, если нет, какие еще методы существуют?

Существует «общее» решение, использующее JavaScript http://mahzeh.org/?p=23

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

...