web-dev-qa-db-fra.com

Flotter un div dessus du contenu de la page

J'ai mis en place un popup qui affiche dynamiquement les options de recherche. Je veux que la boîte "flotte" avant tout sur le contenu du site. Actuellement, lorsque la boîte est affichée, tout le contenu se trouvant en dessous est déplacé et l'apparence est mauvaise.

Je pense avoir déjà essayé de régler l'index z de la division de la boîte sur celui du contenu de la page restante, mais toujours pas de chance.

cssz-index
65
Eric Di Bari

Vous voulez utiliser positionnement absol .

Un élément de position absolue est positionné par rapport au premier élément parent ayant une position autre que statique. Si aucun élément de ce type n'est trouvé, le bloc conteneur est html

Par exemple :

.yourDiv{
  position:absolute;
  top: 123px;
}

Pour que cela fonctionne, le parent doit être relatif (position:relative)

Dans votre cas, cela devrait faire l'affaire:

.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
95
marcgg

Utilisation

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

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

13
Jimmy Shelter

donner z-index:-1 clignote et donne z-index:100 diviser ..

9
Web Design Mumbai

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

1
Serpico

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>
0
Pranesh Janarthanan