Eltern & Kind mit position fixed, Eltern overflow:hidden bug

Kann man mit CSS clip: rect(top, right, bottom, left); clip ein fest positioniertes element zu einem Elternteil. Siehe demo auf http://jsfiddle.net/lmeurs/jf3t0fmf/.

Vorsicht verwenden Sie mit Vorsicht!

Obwohl die clip-Stil ist weit verbreitet, Haupt Nachteile sind, dass:

1. Die position der übergeordneten nicht statisch oder relativ (man kann mit einem absolut positionierten Eltern innerhalb eines relativ positionierten container);
2. Die rect-Koordinaten Prozentwerte nicht unterstützen, obwohl die auto Wert entspricht 100%, dh. clip: rect(auto, auto, auto, auto);;
3. Möglichkeiten mit child-Elemente beschränkt, die in mindestens IE11 & Chrome34, dh. wir können die position der untergeordneten Elemente, um die relative oder absolute oder verwenden CSS3-transform-wie-Skala.

Sehen http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ für mehr info.

EDIT: Chrome scheint zu handhaben, positionieren und CSS3-Transformationen auf die Kind-Elemente viel besser, wenn die Anwendung backface-visibility, also nur um sicher zu sein, die wir Hinzugefügt:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

zu den wichtigsten child-element.

Beachten Sie auch, dass es nicht vollständig unterstützt, von älteren /mobile Browsern oder es könnte einige zusätzlichen Aufwand. Siehe unsere Umsetzung für das Menü am bellafuchsia.com.

1. IE8 zeigt das Menü gut, aber die Menü-links sind nicht anklickbar;
2. IE9 nicht im Menü anzeigen, unter der Falte;
3. iOS-Safari <5 nicht zeigen, das Menü;
4. iOS Safari 5+ repaints den geschnittenen content auf scroll nach scrollen;
5. FF (mindestens 13+), IE10+, Chrome und Chrome für Android scheinen zu spielen schön.

BEARBEITEN 2014-11-02: Demo-URL wurde aktualisiert.

Als alternative zu der Verwendung von clip-Sie können auch {border-radius: 0.0001px} auf ein übergeordnetes element. Es funktioniert nicht nur mit absolute/fixed positionierte Elemente.

Hatte ich ein ähnliches, ziemlich Komplexes problem mit einem fluid-layout, wo in der rechten Spalte hatte eine Feste Breite, und die linke hatte eine flexible Breite. Meine Feste container sollte die gleiche Breite wie die flexible Spalte. Hier ist meine Lösung:

HTML

<div id="wrapper">
    <div id="col1">
    <div id="fixed-outer">
        <div id="fixed-inner">inner</div>
    </div>
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div id="col2">COL2</div>
</div>

CSS

    #wrapper {
    padding-left: 20px;
}

#col1 {
    background-color: grey;
    float: left;
    margin-right: -200px; /* #col2 width */
    width: 100%;
}

#col2 {
    background-color: #ddd;
    float: left;
    height: 400px;
    width: 200px;
}

#fixed-outer {
    background: yellow;
    border-right: 2px solid red;
    height: 30px;
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */
    overflow: hidden;
    padding-right: 200px; /* #col2 width */
    position: fixed;
    width: 100%;
}

#fixed-inner {
    background: orange;
    border-left: 2px solid blue;
    border-top: 2px solid blue;
    height: 30px;
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */
    position: absolute;
    width: 100%;
}

Live-Demo: http://jsfiddle.net/hWCub/