Bootstrap récipient avec position:absolute perd la mise en page à l'intérieur de

Je suis le développement de site web contre la dernière de démarrage de la version 3.3.2. Ma tâche est de créer un système de navigation, qui est placée au-dessus de tout autre contenu (simple rouleau sur menu sur le vol stationnaire). Pour ce menu, je veux utiliser Bootstrap colonnes.

Position .conteneur de fluide au-dessus des autres récipients, j'ai besoin de retirer de flux standard. Donc, nécessité d'utiliser position:absolute. Dès que j'applique cela à .conteneur de fluide (ou wrappers autour d'elle), il perd 100% de la largeur et toute la mise en page à l'intérieur se perd.

Si je supprime position:absolute de .conteneur de fluide (#menu dans mon cas), il sera de retour de mise en page, mais n'est pas supprimé de flux standard.

JSFiddle avec seulement ce cas: http://jsfiddle.net/q6v9wv31/

HTML:

<div class="container first">
    <div class="row">
        <div class="col-xs-12">
            <p>Content here</p>
        </div>
    </div>
</div>
<div class="container ontop">
    <div class="row">
        <div class="col-xs-6">
            <p>Menu Item 1</p>
        </div>
        <div class="col-xs-6">
            <p>Menu Item 2</p>
        </div>
    </div>
</div>

CSS:

body {
    margin: 10px;
}
.first {
    height: 200px;
    background-color: #ddd;
}
.ontop {
    height: 100px;
    background-color: #d00;
    position: absolute;
    top: 100px;
}

Version actuelle du projet: http://html.accuraten.com/ssc-html-dev/public/

S'il vous plaît aidez-moi à comprendre, comment résoudre cette tâche.

Vous pouvez également envelopper le <div class="container"> dans un autre div avec la position absolue et d'une largeur de 100%. Ainsi, vous obtenez le bénéfice de la couche de contenu et les avantages de bottes conteneur de classe css

OriginalL'auteur dandaka | 2015-01-26

  1. 32

    Si vous souhaitez définir la position à l'absolu et veux qu'il ait 100% de largeur, vous devez définir la gauche et la droite des styles CSS:

    HTML: 

    <div class="container first">
    <div class="row">
        <div class="col-xs-12">
            <p>Content here</p>
        </div>
    </div>
</div>
<div class="ontop container">
    <div class="row">
        <div class="col-xs-4">
            <p>Menu Item 1</p>
        </div>
        <div class="col-xs-4">
            <p>Menu Item 2</p>
        </div>
        <div class="col-xs-4">
            <p>Menu Item 2</p>
        </div>
    </div>
</div>

    CSS:

    body {
    margin: 10px;
}
.first {
    height: 200px;
    background-color: #ddd;
}
.ontop {
    height: 100px;
    background-color: #d00;
    position: absolute;
    top: 100px;
    right: 0;
    left: 0;
}

    Changement à gauche: 0 et la droite: de 0 à 10px si vous voulez avoir la même marge que le premier conteneur.

    Un élément en position absolue n'obtient pas d'espace dans le document. Cela signifie qu'il ne risque pas de laisser un espace vide après s'être positionné. Vous pouvez par la suite utiliser les propriétés de la gauche, la droite, le haut et le bas et placer la boîte.

    http://html.net/tutorials/css/lesson14.php#s2

    merci, ça fonctionne! Pourquoi est-ce arrivé?
    Le point de l'utilisation de la position absolue est vous souhaitez positionner un élément absolument. C'est pourquoi vous avez besoin de spécifier haut, gauche, droite/largeur du bas/de la hauteur.
    Vous avez sauvé ma journée bro !

    OriginalL'auteur