web-dev-qa-db-fra.com

Bootstrap conteneur avec position: absolu perd la disposition à l'intérieur

Je développe un site Web contre la dernière Bootstrap version 3.3.2. Ma tâche est de créer une navigation, qui est positionnée au-dessus d'autres contenus (menu déroulant simple en survol). Pour ce menu, je veux utiliser Bootstrap colonnes.

Pour positionner . Container-fluid au-dessus des autres conteneurs, je dois le retirer du flux standard. Il faut donc utiliser la position : absolue . Dès que j'applique ceci à . Container-fluid (ou aux enveloppes qui l'entourent), il perd 100% de largeur et toute la disposition à l'intérieur se perd.

Si j'enlève la position : absolue de . Container-fluid ( # menu dans mon cas), il récupère la mise en page, mais n'est pas supprimé du flux standard.

JSFiddle avec uniquement 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/

Aidez-moi à comprendre comment résoudre cette tâche.

csstwitter-bootstrapcss-position
12
dandaka

Si vous souhaitez définir la position sur absolu et que sa largeur est de 100%, vous devez définir les styles CSS gauche et droit:

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;
}

Changez à gauche: 0 et à droite: 0 à 10px si vous voulez qu'il ait la même marge que le premier conteneur.

Un élément positionné absolu n'obtient pas d'espace dans le document. Cela signifie qu'il ne laisse pas d'espace vide après avoir été positionné. Vous pouvez ensuite utiliser les propriétés gauche, droite, haut et bas pour placer la boîte.

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

34
jrarama