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

У меня есть короткий вводной текст внутри поля, если пользователь хочет читать дальше, он может переключить скрытый элемент div, который показывает остальную часть содержимого. Под этим вступительным блоком у меня есть еще один элемент, который я всегда хочу оставить на этом месте. Я хочу, чтобы переключаемый текст «показывал над» фиксированным содержимым, и я не хочу, чтобы он смещался вниз при открытии переключаемого элемента div. Я экспериментировал с различными значениями z-индекса, абсолютным и относительным позиционированием, но безрезультатно. Есть ли для этого чистое решение на основе 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>

javascript toggle css z-index
person Tamas Kalman    schedule 14.04.2009    source источник
comment
Пожалуйста, очистите и отформатируйте исходный код, если хотите, чтобы мы его посмотрели.   -  person Zack Marrapese    schedule 15.04.2009
comment
Да, возможно, урезанная версия, содержащая только те элементы, с которыми у вас проблемы.   -  person wheresrhys    schedule 15.04.2009

Ответы (4)


arrow_upward
1
arrow_downward

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

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

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

person Chris Brandsma    schedule 14.04.2009

arrow_upward
1
arrow_downward

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

person b. e. hollenbeck    schedule 09.05.2009

arrow_upward
0
arrow_downward

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

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

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

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

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

person Miquel    schedule 14.04.2009
comment
Нет наоборот - я тестировал только с FireFox! Но вторая часть вашего ответа решила проблему. Мне просто нужно было поместить фиксированный контент перед переключаемым контентом в разметке, позиционировать его как абсолютный, и это сработало! Спасибо большое. :) PS.: Я новичок на сайте, поэтому, возможно, мой вопрос был придуман не лучшим образом. - person Tamas Kalman; 17.04.2009

arrow_upward
0
arrow_downward

Пытаться:

#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-индекс.

person EoghanM    schedule 09.05.2009