webentwicklung-frage-antwort-db.com.de

Positionierte Div innerhalb eines anderen Divs behoben

Ich habe ein div position:fixed; und mein Problem ist, dass die Position relativ zu allen Seiten fixiert ist. Ich brauche, dass das fixe div in einem anderen div bleibt, das auf der Seite mit Rändern in auto zentriert ist um immer das div in der gleichen Position zu sehen).

Ich benutze das Jquery-Plugin StickyScroll , kann es aber nicht in Internet Explorer zum Laufen bringen.

Die Lösung könnte in jquery/javascript, css sein.

Vielen Dank

14
Sbml

Dann möchten Sie keine feste Positionierung, sondern absolute Positionierung.

Setzen Sie position: absolute; für das Element, das Sie positionieren möchten. Legen Sie position: relative; für das zentrierte div fest, damit es zu einer Ebene wird, in der Sie Elemente positionieren können.

15
Guffa

Sie benötigen definitiv kein jQuery oder JavaScript, um dies zu erreichen. Folgendes benötigen Sie: 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;
}

Schauen Sie sich dies an: http://jsfiddle.net/2mYQe/1/

5
George Katsanos

Nur ein wenig in George Katsanos Code geändert, könnte für einige hilfreich sein.

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

Beispiel unter: http://jsfiddle.net/2mYQe/480/

4
Vishal Vaishya

Die richtige Lösung ist "Flex". Seit dem ursprünglichen Beitrag sind drei Jahre vergangen, also gehe ich davon aus, dass wir die Unterstützung von IE8 zugunsten moderner Browser ignorieren können, die diese Lösung unterstützen.

Wie viele hier haben alle vorgeschlagenen Lösungen Probleme festgestellt. Wenn das erste Element im Inhaltsbereich vor der absolut positionierten Kopfzeile ausgeblendet ist oder der Inhaltsbereich die volle Höhe der übergeordneten Bedeutung beansprucht, besteht die Gefahr, dass der untere Bereich des Inhaltsbereichs abgeschnitten wird, es sei denn, Sie ziehen die Kopfzeile von der Gesamthöhe ab (Bsp .: height: calc (100% - "header height" px) bedeutet, dass Sie in Ihrem CSS hart codierte Werte haben ... nicht gut, oder die Bildlaufleiste auf der übergeordneten Ebene bedeutet, dass die Kopfzeile dafür kämpft Grundeigentum.

Um diese Hack-Lösungen zu vermeiden, verwenden Sie die "Flex" -Lösung unten.

<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