0

ボックス内に短い紹介テキストがあります。ユーザーがさらに読みたい場合は、残りのコンテンツを表示する非表示の 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

4 に答える 4

1

私が過去にやったこと：

コンテンツを 2 つのスパンに分けます。1 つのスパンが表示され、もう 1 つのスパンは非表示になります。ユーザーが残りのコンテンツを表示したい場合は、残りのテキストを含む別のスパンを表示します。

簡単にするために、JQuery の toggle() コマンドを使用します。

于 2009-04-14T21:00:46.010 に答える
1

divの表示属性を変更してコンテンツを非表示および表示するよりも、z-indexを移動する方が優れている/効率的であることがわかりません。ページのすべてのコンテンツを常に表示したい理由はありますか?

于 2009-05-09T16:12:43.803 に答える
0

IEのみでテストしていると思います。Firefox にはこの問題はありません。

これは IE の既知のバグ、z-index バグです。

z-index は、要素を強制的に別の要素の上に配置する唯一の方法ですか?他の方法はありませんか?

javascript http://mahzeh.org/?p=23を使用した「一般的な」解決策があります

しかし、最善の方法は、要素を再配置して、展開可能な要素が下のボックスの上に来るようにすることです。HTML で覆いたいボックスの後に挿入し、絶対配置を使用して視覚的にその上に配置してみてください。

于 2009-04-14T21:07:19.367 に答える
0

試す：

#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設定#moredisplay: block;

この場合、z-index#moreは以前#underのドキュメント ツリーと同様に暗示されているため、より高い z-index を持ちます。

于 2009-05-09T16:07:00.447 に答える