Pousser vers le bas du contenu dans la page Web

Question

Je suis en train de flotter un div vers le haut de la fenêtre. Cependant, il couvre le contenu en haut de la page, c'est-à-dire qu'il ne pousse pas en haut de la page. Pourtant, je vois Stack Overflow faire cela avec leur barre de notification, car il ne couvre pas le nom d'utilisateur/rep/liens. Y a-t-il un moyen de répliquer cela avec CSS?

Answer 1

Vous pouvez définir la marge supérieure de l'objet conteneur extérieur à la hauteur de la div flottante:

<div id="outerContainer"> 
    ... page content goes here ... 
</div> 

<div id="floatingNotification"> 

</div> 

Puis, en css:

#floatingNotification 
{ 
    ... 
    height: 20px; 
} 

#outerContainer 
{ 
    margin-top: 20px; 
} 

Answer 2

Dans le cas de débordement de la pile, je pense qu'il y a de bonnes chances qu'ils utilisent jQuery pour manipuler le contenu de la page. Je n'ai pas exploré les scripts liés, et je ne l'ai pas reçu aucune notification pour vérifier avec, mais je risque de deviner que c'est quelque chose comme:

$(document).ready(
    function() { 
     var element = '<div id="notification"></div>'; 
     var text = '<p>The text to show in the notification thingumabob.</p>'; 

     $('div#wrap').prepend(element).find('#notification').prepend(text).css('display','none'); 
     if ('#notification') { 
      $('div#notification').slideDown('slow'); 
     } 
    } 
) 

S'il vous plaît noter que je suis incroyablement nouveau pour jQuery - et, franchement, JavaScript en général - alors il y a toutes les chances que j'ai suggéré quelque chose d'horriblement faux. Mais, après l'avoir testé, le concept fonctionne. Même si le element que vous souhaitez ajouter est flottant ou absolument positionné, le slideDown() semble s'occuper de déplacer le contenu de la page afin d'éviter qu'il ne recouvre d'autres éléments.

Cela peut, ou peut-être pas, être une coïncidence dans mon installation, cependant.

Answer 3

La réponse à cette question dépend de l'utilisation d'un flottant relatif ou absolu. Si c'est absolu, définissez votre div float par exemple {top: 20px;}. Si c'est relatif, utilisez padding-top, margin-top (ou margin-bottom sur un élément qui se trouve au-dessus). Ce qui fonctionne le mieux dans les navigateurs courants dépend de l'image globale.