parent & child with position fixed, parent overflow:hidden bug

Możesz rozważyć użycie CSS clip: rect(top, right, bottom, left); do przycinania elementu o stałej pozycji do rodzica. Zobacz demo na http://jsfiddle.net/lmeurs/jf3t0fmf/.

uważaj, używaj ostrożnie!

Chociaż styl klipu jest szeroko obsługiwany, główne wady to:

1. pozycja rodzica nie może być statyczna ani względna (można użyć absolutnie położonego rodzica wewnątrz relatywnie położonego kontenera);
2. współrzędne rect nie obsługują procentów, choć wartość auto równa się 100%, tj. clip: rect(auto, auto, auto, auto);;
3. możliwości z elementami potomnymi są ograniczone w co najmniej IE11 i Chrome34, tj. nie możemy ustawić pozycji elementów potomnych na względną lub absolutną lub użyć transformacji CSS3 jak skali.

Zobacz http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property / aby uzyskać więcej informacji.

EDIT: Chrome radzi sobie z pozycjonowaniem i CSS3 transformuje na elementach potomnych o wiele lepiej, gdy zastosowanie backface-visibility , więc dla pewności dodaliśmy:

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

Do głównego elementu potomnego.

Należy również pamiętać, że nie jest w pełni obsługiwany przez starsze / mobilne przeglądarki lub może to wymagać dodatkowego wysiłku. Zobacz naszą implementację menu na bellafuchsia.com .

1. IE8 dobrze pokazuje menu, ale linki do menu nie są klikalne;
2. IE9 nie pokazuje menu pod fałdą;
3. iOS Safari Przeglądarka iOS Safari 5 + ponownie maluje przycięte treści na przewijaniu po przewinięciu; [19]} FF (co najmniej 13+), IE10+, Chrome i Chrome dla Androida wydają się być ładne.

Edycja 2014-11-02: URL wersji Demo został zaktualizowany.

2016 update:

Możesz utworzyć nowy kontekst układania, jak widać na Coderwall :

<div style="transform: translate3d(0,0,0);overflow:hidden">
   <img style="position:fixed; ..." />
</div>

Co odnosi się do http://dev.w3.org/csswg/css-transforms/#transform-rendering

Dla elementów, których układ jest regulowany przez model pudełkowy CSS, każda wartość inna niż żadna dla przekształcenia powoduje utworzenie zarówno kontekstu stosu,jak i bloku zawierającego. Obiekt działa jako blok zawierający stałe położenie Potomków.

Jeśli chcesz ukryć przepełnienie elementów o stałej pozycji, najprostszym rozwiązaniem, jakie znalazłem, jest umieszczenie elementu wewnątrz elementu kontenera i zastosowanie position:fixed i overflow:hidden do tego elementu zamiast elementu zawartego (musisz usunąć position:fixed z elementu zawartego, aby to zadziałało). Zawartość stałego pojemnika należy następnie obciąć zgodnie z oczekiwaniami.

W moim przypadku miałem problem z używaniem object-fit:cover na elemencie o stałej pozycji (wylewał się poza granice strony, niezależnie od overflow:hidden). Umieszczenie go w stałym pojemniku z overflow:hidden na pojemniku naprawiło problem.

Jako alternatywę dla użycia clipa możesz również użyć {border-radius: 0.0001px} na elemencie nadrzędnym. Działa nie tylko z elementami absolutnymi/stałymi.

Elementy o stałej pozycji są pozycjonowane względem okna przeglądarki, więc element nadrzędny jest w zasadzie nieistotny.

Aby uzyskać pożądany efekt, gdzie {[0] } Na rodzicu klipuje dziecko, użyj position: absolute zamiast: http://jsfiddle.net/DBHUv/1/

Miałem podobny, dość złożony problem z układem płynnym, gdzie prawa kolumna miała stałą szerokość, a lewa elastyczną. Mój stały pojemnik powinien mieć taką samą szerokość jak elastyczna kolumna. Oto moje rozwiązanie:

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/