web-dev-qa-db-fra.com

Fixed Positioned Div À l'intérieur d'une autre div

J'ai un div position:fixed; et mon problème est que la position fixe est relative à toute la page, il faut que le div fixe reste dans un autre div centré dans la page avec des marges en auto. voir toujours la div dans la même position).

J'utilise le plugin jQuery StickyScroll mais je ne peux pas le faire fonctionner dans Internet Explorer.

La solution pourrait être jquery/javascript, css.

Merci

javascriptjqueryhtmlcsscss-position
14
Sbml

Ensuite, vous ne voulez pas un positionnement fixe, mais un positionnement absolu.

Définissez position: absolute; sur l'élément que vous souhaitez positionner. Définissez position: relative; sur le div centré de sorte qu'il devienne un calque dans lequel vous pourrez positionner des éléments.

15
Guffa

Pour ce faire, vous n'avez certainement pas besoin de jQuery ou de JavaScript. Voici ce dont vous avez besoin: HTML:

<div class="outer">
    <div class="inner">some text here
    </div>
</div>

CSS:

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}

Regardez ceci: http://jsfiddle.net/2mYQe/1/

5
George Katsanos

Le code George Katsanos qui vient d’être légèrement modifié pourrait être utile à certains.

.outer {
    width:200px;
    height:300px;
    background-color:red;
    margin:0 auto;
    overflow:auto;    
}

.inner {
    width:182px;
    border:1px solid white;
    position:absolute;
    background-color:buttonface;
}

Exemple sur: http://jsfiddle.net/2mYQe/480/

4
Vishal Vaishya

La solution correcte est "flex". Cela fait 3 ans que l'article original est sorti, je suppose donc que nous pouvons ignorer la prise en charge d'IE8 au profit de navigateurs plus modernes prenant en charge cette solution.

Comme beaucoup de personnes ici ont noté que chaque solution proposée rencontrait des problèmes. Du premier élément de la zone de contenu masqué à l'en-tête positionné de manière absolue, ou de la zone de contenu consommant toute la hauteur du parent, ce qui signifie que le bas de la zone de contenu risque d'être coupé sauf si vous soustrayez l'en-tête de sa hauteur totale (ex. height: calc (100% - "hauteur de l'en-tête" px), ce qui signifie que vous avez des valeurs codées en dur dans votre CSS ... pas très bonnes, ou que la barre de défilement est définie au niveau parent, ce qui signifie que l'en-tête la combat immobilier.

Afin d'éviter ces solutions de piratage, utilisez la solution "flex" ci-dessous.

<div style="width: 200px; float: right; border: 1px solid black;
    display: flex; flex-direction: column;">
    <div style="width: 100%;">
        <div style="width: 100%;">
            I'm a header
        </div>
    </div>

    <div style="width: 100%; height: 100%; overflow:auto;">
        <div style="height:900px; background-color:lavender;">content area</div>
    </div>
</div>
0
spyder1329