web-dev-qa-db-fra.com

Comment faire apparaître un <div> devant du texte / des tableaux normaux

J'ai essayé de faire apparaître une boîte DIV devant le texte/les tableaux que j'ai sur une page Web.

Le DIV est rendu visible par une pression sur un bouton; mais lorsqu'il est visible, il déplace automatiquement le texte/tableau vers le bas et inclut le contenu DIV au-dessus.

Quelqu'un peut-il aider?

cssxhtml
18
privateace

Vous pouvez utiliser l'index d'empilement du div pour le faire apparaître au-dessus de toute autre chose. Faites-en une valeur plus grande que d'autres éléments et soyez bien au-dessus des autres.

utilisation z-index propriété. Voir Spécification du niveau de pile: la propriété 'z-index' et

Description détaillée des contextes d'empilement

Quelque chose comme

#divOnTop { z-index: 1000; }

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

Ce que vous devez rechercher sera IE6. Dans IE 6 certains éléments comme <select> sera placé au-dessus d'un élément avec une valeur d'index z supérieure à <select>. Vous pouvez avoir une solution pour cela en plaçant un <iframe> derrière la div.

Voir ceci bogue z-index Internet Explorer?

39
rahul

z-index ne fonctionne que sur des éléments absolus ou relativement positionnés. J'utiliserais un div externe pour positionner relatif. Réglez le div en haut en position absolue pour le supprimer du flux du document.

.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

Il déplace la table vers le bas car il n'y a pas beaucoup d'espace, essayez de diminuer/augmenter la largeur de certains éléments afin qu'il trouve de l'espace et ne pousse pas la table vers le bas. Vous pouvez également utiliser le positionnement absolute pour positionner le div exactement à l'endroit souhaité, par exemple:

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

Si vous voulez le faire apparaître over quelque chose, vous devez également lui donner z-index, donc cela pourrait ressembler à ceci:

<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

Vous pouvez ajouter un div avec position:absolute dans une table/div avec position:relative. Par exemple, si vous souhaitez que votre superposition div s'affiche en bas à droite de la div principale du texte (la largeur et la hauteur peuvent être supprimées):

<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>

Voir ici: http://jsfiddle.net/bptvt5kb/

1
Yvan

faites ces changements dans le style de votre div

  1. z-index:100; une valeur plus élevée garantit que cet élément est avant tout
  2. position:fixed; cela garantit que même si le défilement est effectué,

div se trouve sur le dessus et toujours visible

0
Praveen Prasad