Czy `overflow: hidden` zmienia pozycję absolutnych dzieci?

Question

Mam obrazy przesuwane w galerii obrazów tylko z css. Patrz przykład http://codepen.io/anon/pen/xmhzE?editors=110 dla przykładu lub załączonego kodu.

Działa tak długo, jak długo #images -div nie ma zestawu overflow: hidden. Kiedy przepełnienie jest ustawione na ukryte, absolutne pozycjonowanie pojedynczych obrazów nie działa. Kiedy używam ujemnych wartości dla left -property obrazów, działa również z ukrytym przepełnieniem.

Czy overflow:hidden zmienia sposób układania dzieci bezwzględnych?

Czy ktoś ma rozwiązanie tego problemu?

---

Źródła

index.html:

<div id="images"> 
    <img id="image1" src="http://i.imgur.com/dL3io.jpg" /> 
    <img id="image2" src="http://i.imgur.com/qASVX.jpg" /> 
    <img id="image3" src="http://i.imgur.com/fLuHO.jpg" /> 
    <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /> 
</div> 
<div id="slider"> 
    <a href="#image1">1</a> 
    <a href="#image2">2</a> 
    <a href="#image3">3</a> 
    <a href="#image4">4</a> 
</div> 

base.css:

body { 
    text-align: center; 
    } 
#images { 
    width: 400px; 
    height: 250px; 
    /*overflow: hidden; if this is set absolute positioning of images breaks*/ 
    position: relative; 
    background-color: red; 

    margin: 20px auto; 
} 
#images img { 
    width: 400px; 
    height: 250px; 
    display: block; 

    position: absolute; 
    top: 0px; 
    left: 400px; 
    z-index: 1; 
    opacity: 0; 

    transition: all linear 500ms; 
    -o-transition: all linear 500ms; 
    -moz-transition: all linear 500ms; 
    -webkit-transition: all linear 500ms; 
} 
#images img:target { 
    top: 0px; 
    left: 0px; 
    z-index: 9; 
    opacity: 1; 
} 
#slider a { 
    text-decoration: none; 
    background: #E3F1FA; 
    border: 1px solid #C6E4F2; 
    padding: 4px 6px; 
    color: #222; 
} 
#slider a:hover { 
    background: #C6E4F2; 
} 

Answer 1

Ta łamigłówka trzymał mnie dzieje. Po prostu nie mogłem tego zostawić. Ostatniego wieczoru bawiłem się nim, ale nie mogłem go naprawić (do chwili jeszcze :)).

Test-obudowy 1

Choć uproszczenie rzeczy usunąłem krycie z obrazka-elementów i pozostawione tylko 1 zdjęcie i jeden odnośnik. Najpierw ustawiłem obraz na 390px, dzięki czemu mogę upewnić się, że jest on w tej pozycji (widać trochę po lewej stronie).

http://codepen.io/anon/pen/tpCrc

Wniosek:

Więc co jest ważne, aby zauważyć, że fakt, że obraz początkowo jest tam gdzie powinno być. Następnie po kliknięciu przycisku 1 widać, że po prostu pomija przejście. Tak więc przeglądarka nie zmienia położenia elementu z powodu przepełnienia: ukryty (jak sugeruje tytuł tego posta). Przechodzi do pozycji wspomnianej w CSS (w: części docelowej), ale bez przejścia.

Test-obudowy 2

Potem dostałem się zastanawiać, dlaczego przeglądarka będzie działać w ten sposób, a myślałem, że może ogniskowanie elementu obrazu miał coś z tym zrobić. Jeśli się nad tym zastanowisz: po kliknięciu jednego z przycisków dodaj #target do adresu URL strony i przeglądarki, a następnie spróbujesz "przewinąć" do tego elementu. Do tego element ten musi być widoczny.

Więc zastanawiałem się: może CSS nie ma z tym nic wspólnego. Spróbujemy: , więc całkowicie usunąłem: target-part i przejścia.

http://codepen.io/anon/pen/IvfBE

Wniosek:

Wow! Co tam widzimy?Po kliknięciu jednego z przycisków obraz nadal przeskakuje w lewo: 0 !! Myślę, że mamy tam przewagę. Wciąż jednak nie wiedziałem, jak to naprawić. Wciąż wydaje mi się, że to błąd przeglądarki.

Rozwiązaniem

Następnie - po dobrym sen - Obudziłem się ze świeżym nowym pomysłem. Co zrobić, jeśli nie kierujemy elementu, który chcemy przenieść?

Dlatego dodałem pojemnik do każdego elementu-obrazu i celuję w niego.

<div id="images"> 
    <div id="img1container"><img id="image1" src="http://i.imgur.com/dL3io.jpg" /></div> 
    <div id="img2container"><img id="image2" src="http://i.imgur.com/qASVX.jpg" /></div> 
    <div id="img3container"><img id="image3" src="http://i.imgur.com/fLuHO.jpg" /></div> 
    <div id="img4container"><img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /></div> 
</div> 
<div id="slider"> 
    <a href="#img1container">1</a> 
    <a href="#img2container">2</a> 
    <a href="#img3container">3</a> 
    <a href="#img4container">4</a> 
</div> 

W CSS pozycja obrazu musi teraz zostać zmieniona przez "[parentElement]: target img" zamiast tego.

body { 
    text-align: center; 
} 
#images { 
    width: 400px; 
    height: 250px; 
    overflow: hidden; /* this did break it in the past ;) */ 
    position: relative; 
    background-color: red; 

    margin: 20px auto; 
} 
#images img { 
    width: 400px; 
    height: 250px; 
    display: block; 

    position: absolute; 
    top: 0px; 
    left: 400px; 
    z-index: 1; 
    opacity: 0; 

    transition: all linear 500ms; 
    -o-transition: all linear 500ms; 
    -moz-transition: all linear 500ms; 
    -webkit-transition: all linear 500ms; 
} 
#images div:target img { 
    top: 0px; 
    left: 0px; 
    z-index: 9; 
    opacity: 1; 
} 
#slider a { 
    text-decoration: none; 
    background: #E3F1FA; 
    border: 1px solid #C6E4F2; 
    padding: 4px 6px; 
    color: #222; 
} 
#slider a:hover { 
    background: #C6E4F2; 
} 

i przykład praca: http://codepen.io/anon/pen/lyzhi

Wniosek:

Yay !! Rzeczywiście, nie skupiając się na elemencie, który chcesz przenieść, nie pęka. Masz tam swoją poprawkę, ale nadal wydaje mi się, że to błąd przeglądarki/silnika. Więc proponuję utworzyć gdzieś raport o błędzie (jeśli masz czas).

BTW: Testowałem to w Chrome i IE - tylko w najnowszych wersjach. Możesz przetestować to w Firefoksie i być może w innych przeglądarkach.