Flotter un div au-dessus du contenu de la page

Question

J'ai implémenté une fenêtre contextuelle qui affiche dynamiquement les options de recherche. Je veux que la boîte "flotte" au-dessus de tout le contenu du site. Actuellement, lorsque la boîte est affichée, elle déplace tout le contenu en dessous et semble mauvaise.

Je crois que j'ai déjà essayé de régler l'indice z du div de la boîte à au-dessus de celui du contenu de la page restante, mais toujours pas de chance.

Answer 1

Utiliser

position: absolute;
top: ...px;
left: ...px;

Pour positionner la div. Assurez-vous qu'il n'a pas de balise parent avec position : relative ;

Answer 2

donne z-index:-1 à flash et donne z-index:100 à div..

Answer 3

Oui, plus l'indice z est élevé, mieux c'est. Il positionnera votre élément de contenu au-dessus de tous les autres éléments de la page. Disons que vous avez un index z pour certains éléments de votre page. Recherchez le plus haut, puis donnez un indice z plus élevé à votre élément popup. De cette façon, il circulera même sur les autres éléments avec l'indice z. Si vous n'avez pas d'index z dans un élément de votre page, vous devez donner comme index z :2 ; ou quelque chose de plus élevé.

Answer 4

Le code ci-dessous fonctionne,

<style>
    .PanelFloat {
        position: fixed;
        overflow: hidden;
        z-index: 2400;
        opacity: 0.70;
        right: 30px;
        top: 0px !important;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
</style>

<script>
 //The below script will keep the panel float on normal state
 $(function () {
        $(document).on('scroll', function () {
            //Multiplication value shall be changed based on user window
            $('#MyFloatPanel').css('top', 4 * ($(window).scrollTop() / 5));
        });
    });
 //To make the panel float over a bootstrap model which has z-index: 2300, so i specified custom value as 2400
 $(document).on('click', '.btnSearchView', function () {
      $('#MyFloatPanel').addClass('PanelFloat');
  });

  $(document).on('click', '.btnSearchClose', function () {
      $('#MyFloatPanel').removeClass('PanelFloat');
  });
 </script>

 <div class="col-lg-12 col-md-12">
   <div class="col-lg-8 col-md-8" >
    //My scrollable content is here
   </div>
   //This below panel will float while scrolling the above div content
   <div class="col-lg-4 col-md-4" id="MyFloatPanel">
    <div class="row">
     <div class="panel panel-default">
      <div class="panel-heading">Panel Head </div>
     <div class="panel-body ">//Your panel content</div>
   </div>
  </div>
 </div>
</div>