'taşma: gizli' mutlak çocukların konumlarını değiştiriyor mu?

Question

Sadece css ile dışarıdan görüntü kayan bir resim galerim var. Örnek veya ekli kod için bkz. http://codepen.io/anon/pen/xmhzE?editors=110.

#images -div overflow: hidden setine sahip olmadığı sürece iyi çalışır. Taşma gizli olarak ayarlandığında, tek görüntülerin mutlak konumu artık çalışmıyor. Görüntülerin left için uygun olmayan değerlerini kullandığımda, taşma gizli olarak da çalışır.

overflow:hidden, mutlak çocukların düzenlenme biçimini değiştiriyor mu?

Bu sorunun çözümünde herhangi biri var mı?

---

Kaynaklar

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

Bu bulmaca bana devam etti. Sadece onu bırakamam. Geçen akşam bununla uğraşıyordum ama düzeltemedim (henüz bitene kadar :)).

Testcase 1

Ben görüntü elementlerden opaklığı kaldırıldı ve sadece 1 resim ve bir bağlantıyı sol şeyler basitleştirilmesi ederken. Görüntüyü başlangıçta 390px olarak ayarlıyorum, böylece bu konumda olduğundan emin olabilirim (sadece soldan biraz görebilirsiniz).

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

Sonuç:

Peki fark önemlidir görüntü başlangıçta var aslında da olması gereken yerde olması. Ardından, 1 düğmesine tıkladığınızda geçişi atladığını görebilirsiniz. Böylece tarayıcı, taşma nedeniyle öğenin konumunu değiştirmez: gizlenen (bu yazının başlığı gibi). CSS'de (hedef kısımda) belirtilen konuma geçer, ancak geçiş olmaz. tarayıcı bu şekilde hareket edeceğini ve belki görüntü öğesinin odaklama bununla bir ilgisi olduğunu düşünerek tutulması neden Testcase 2

Sonra merak var. Eğer düşünürseniz: sayfanın ve tarayıcının URL'sine #target eklediğiniz düğmelerden birine tıkladığınızda o öğeye "kaydır" denir. Bunun için bu elemanın görünebilir olması gerekiyor.

Şunu merak ettim: belki CSS'nin bununla hiçbir ilgisi yoktur. Hadi, deneyelim: hedef parça ve geçişleri tamamen kaldırdım.

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

Sonuç:

Vay! Orada ne görüyoruz?Düğmelerden birine tıkladığınızda görüntü hala sola atlar: 0 !! Sanırım orada bir kurşun var. Yine de, bunu nasıl düzelteceğimi bilmiyordum. Hala bana bir tarayıcı-böcek gibi görünüyor.

düzeltme Sonra

- iyi bir uykunun geceden sonra - Ben yepyeni bir fikirle uyandım. Gerçekten geçiş yapmak istediğimiz öğeyi hedeflemezsek?

Her bir görüntü öğesine bir kapsayıcı ekledim ve bunun yerine bunu hedefledim. yerine: "hedef img [parentElement]" görüntüsünün konumu artık sahip BB'de

<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> 

tarafından değiştirilmesi.

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

Ve çalışma örneği: http://codepen.io/anon/pen/lyzhi

Sonuç:

Yay !! Gerçekten, geçiş yapmak istediğiniz öğeye odaklanmamakla, kırılmaz. Yani, orada fikriniz var, ama yine de bana bir tarayıcı/motor-hata gibi görünüyor. Yani bir yere bir hata raporu oluşturmanızı öneririm (eğer zamanınız varsa).

BTW: Bunu yalnızca Chrome ve IE'de test ettim - her ikisi de yalnızca en yeni sürümler. Bunu Firefox'ta ve belki başka bazı tarayıcılarda test etmek isteyebilirsiniz.