Fixed-position-div nicht bleiben, enthalten in der Umhüllung div-overlays gesamten Bildschirm?

Ich versuche, mich einer festen position, div Aufenthalt in einem äußeren div. Ich will das fixe positionieren von div-Breite zu 100%. Allerdings, wenn ich die Breite auf 100%, das fixe positionieren von div-deckt den gesamten Bildschirm und overlays die Bildlaufleiste im Firefox/IE8 usw. Hier ist ein Beispiel von was ich spreche:

<div style="width: 380px; height: 125px;overflow-y: scroll;overflow-x: hidden;">
    <div style="position:fixed;width:100%;">
        <div style="width: 100%;background: red; text-align: center; height:50px;">header</div>
    </div>

    <div style="margin-top: 50px; height:250px;">
        Contents here<br />
        Contents here<br />
        Contents here<br />
        Contents here<br />
        Contents here<br />
    </div>
</div>

Wie Sie sehen können, ist das äußere div hat eine Breite von 380 Pixel... also, ich würde nicht denken, es möglich, für die fixed-position-div zu erweitern, die außerhalb dieser Grenze, doch das tut es.

Was mache ich falsch?

Dank!

Versuchen Sie, die äußeren <div>'s position relative?

InformationsquelleAutor Polaris878 | 2011-02-28

  1. 7

    Einem element mit fester position positioniert ist, relativ zum viewport. Fixed positionierte Elemente werden entfernt, aus dem normalen Fluss. Das Dokument und andere Elemente Verhalten sich wie die fixed-positionierte element nicht vorhanden ist.

    Obwohl Sie erklären position:fixed; Sie nicht geben Sie einen Wert für die top und left Eigenschaften. Der Standardwert für beide Eigenschaften ist auto können die browser berechnen die Obere Kante und die linke Kante Positionen. Der berechnete Rand Positionen drehen, um das element am oberen und linken Rand edge-Positionen in den normalen Ablauf, die ist, warum es sich bewegt, wenn Sie einen Rand.

    Danke für die Erklärung... Es scheint seltsam, dass es respektiert left und top, aber nicht right...
    Es ist ein "Wir haben um dieses Ding irgendwo." Art der Sache.

    InformationsquelleAutor melhosseiny

  2. 4

    Fest ist immer relativ zum parent-Fenster, nie ein element. Sobald die position legen Sie fest, seine aus dem Belegfluss.

    http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

    Feste Positionierung ist eine Unterkategorie der
    die absolute Positionierung. Der einzige
    Unterschied ist, dass bei einem festen
    positionierte box, die mit block
    wird durch die viewport.

    Aber warum wird das Feste element verschieben Sie mit den Eltern? Zum Beispiel, einige Margen an die Eltern und sehen dem festen element bewegt werden.

    InformationsquelleAutor Loktar

  3. 2

    Den Browser richten Sie die Feste div die beste, die Sie können, um die mit div standardmäßig.

    Meine Lösung ist, legte es in einen relativen div, dass die Schwimmer auf der rechten Seite. Dies wird geben Sie Ihren Ausgangspunkt und das fixe div-Element wird nach rechts gefloatet.

    Allem die position: fixed wird hier tun, ist machen

    <div class="page-container">    
    <div style="position: relative; float: right;">
        <div style="position: fixed; bottom: 10px; text-align:right; background:#000000; opacity:.8; padding:5px;">
            <a href='#Top' style="color:#fff; margin: 0 5 0 5">Return to Top</a>
        </div>
    </div>
</div>

    Ich weiß, dieser Beitrag ist alt, aber ich hoffe, es hilft jemand. Funktioniert im IE7+ und Firefox sicher.

    InformationsquelleAutor Darkwing Duck

  4. 1

    Es ist genau Ihre Frage, die mir geholfen haben eine Lösung zu finden, die für mich gearbeitet. Ich hatte zum erstellen der "Heilige Gral" (das ist eine Feste Spalte auf der linken und rechten und eine flüssige Säule in der Mitte) von Grund auf neu, sondern gebraucht fixed divs die jeweils die relative, fließenden Spalten.

    Während es ist nicht unbedingt semantisch korrekt (gut, weder fixiert sind, divs...) es funktioniert tatsächlich genau wie nötig und sogar nach dem ändern der Größe der mittleren Spalte der "Heilige Gral".

    Unten ist eine Kopie von den genauen CSS verwendet habe ich:

    #fixedcenterarea {
    width:(100%-210px); /*Right column of 200 minus a margin gap of 10; works in IE too*/
    height:70px;
    position:fixed;
    left:200px;  /*obey the left column of 200*/
    right:210px; /*trim off 210px from the right of the viewport (200 column plus 10 margin*/
    overflow:hidden;
    margin-left:10px; /*adds a gap from the left column*/
}

    Können Sie auch hinzufügen top:50px; zu stoßen, es senkrecht nach unten.

    Der einzige Nachteil an diesem ist in der Größe der Fenster. Alles ist fein, bis das Fenster geht unter die minimale Größe (falls Sie eine haben).

    Da diese verwendet einen Prozentsatz des Containers, wird es weiterhin zu Folgen, obwohl die view-port hat aufgehört zu schrumpfen.

    Und, wenn Sie neugierig sind, hier ist, wie zu schaffen, den Heiligen Gral:
    http://www.alistapart.com/articles/holygrail/

    InformationsquelleAutor mayoman7

  5. 0

    Festen, Absoluten und Statischen Positionen sind nicht relativ zum übergeordneten.
    Also, wenn Sie etwas ändern, Sie sind sich über Ihre base (e.g oberen,linken Ecke der Seite für das absolute)

    Denken Sie an ein anderes auslegen Methode.

    Absolute ist relativ, jeder Elternteil, der eine andere position als die statische.
    Absolute ist, wenn die Eltern die relative position... position:fixed gehorcht den Eltern Ränder, die macht mich glauben, dass es sollte auch gehorchen den Eltern Breite.

    InformationsquelleAutor AbiusX

  6. 0

    Dieser post ist sehr alt, aber andere profitieren können von dieser Antwort. In modernen Browsern, die Sie verwenden konnten transform: translate3d(0,0,0); auf die .parent um die position fixiert Verhalten, wie absolute:

    <div class="parent">
    <div class="child"></div>
</div>

    Über diese Struktur können Sie die folgenden CSS:

    .parent {
    position: relative;
    transform: translate3d(0,0,0);
}

.child {
    position: fixed;
}

    Im folgenden wird die .child Verhalten, als wenn Sie es wäre position: absolute;. Dies ist sehr hilfreich, wenn Sie müssen, verwenden Sie Transformationen mit den Eltern mit overflow: hidden;. Jemand hatte ein gutes Beispiel in diesem Fall hier.

    InformationsquelleAutor Roland

Schreibe einen Kommentar