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

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *