web-dev-qa-db-ja.com

通常のテキスト/テーブルの前に<div>を表示する方法

Webページにあるテキスト/テーブルの前にDIVボックスを表示しようとしています。

DIVはボタンを押すことで表示されます。ただし、表示されると、テキスト/テーブルが自動的に下に移動し、その上にDIVコンテンツが含まれます。

誰でも助けることができますか？

cssxhtml
18
privateace

Divのスタッキングインデックスを使用して、他のものの上に表示することができます。他の要素よりも大きな値にし、他の要素の上に配置します。

z-indexプロパティを使用します。 スタックレベルの指定： 'z-index'プロパティおよび

スタッキングコンテキストの詳細な説明

何かのようなもの

#divOnTop { z-index: 1000; }

<div id="divOnTop">I am on top</div>

気をつけなければならないのはIE6です。 In IE 6 <select>のようないくつかの要素は、<select>よりも大きいz-index値を持つ要素の上に配置されます。これを回避するには、 <iframe>をdivの後ろに配置します。

こちらをご覧くださいInternet Explorer z-index bug？

39
rahul

z-indexは、絶対要素または相対的に配置された要素でのみ機能します。相対位置に設定する外部divを使用します。上部のdivを絶対位置に設定して、ドキュメントのフローから削除します。

.wrapper {position:relative;width:500px;}

.front {
  border:3px solid #c00;
  background-color:#fff;
  width:300px;
  position:absolute;
  z-index:10;
  top:30px;
  left:50px;
 }
  
.behind {background-color:#ccc;}
<div class="wrapper">
    <p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <div class="behind">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <table>
            <thead>
                <tr>
                    <th>aaa</th>
                    <th>bbb</th>
                    <th>ccc</th>
                    <th>ddd</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                </tr>
            </tbody>
        </table>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div> 
</div>
15
Emily

多くのスペースがないため、テーブルを下に移動します。特定の要素の幅を増減して、スペースを見つけ、テーブルを押し下げないようにします。また、absoluteポジショニングを使用して、divを目的の場所に正確に配置することもできます。次に例を示します。

<style>
 #div_id
 {
   position:absolute;
   top:100px; /* set top value */
   left:100px; /* set left value */
   width:100px;  /* set width value */
 }
</style>

over何かを表示したい場合は、z-indexので、次のようになります。

<style>
 #div_id
 {
   position:absolute;
   z-index:999;
   top:100px; /* set top value */
   left:100px; /* set left value */
   width:100px;  /* set width value */
 }
</style>
4
Sarfraz

position:absoluteのテーブル/ div内にposition:relativeのdivを追加できます。たとえば、オーバーレイdivをメインテキストdivの右下に表示する場合（幅と高さは削除できます）：

<div style="position:relative;width:300px;height:300px;background-color:#eef">
    <div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
        I'm over you!
    </div>
    Your main text
</div>

こちらをご覧ください： http://jsfiddle.net/bptvt5kb/

1
Yvan