有关示例或所附代码,请参见 http://codepen.io/anon/pen/xmhzE?editors=110.
只要#images-div没有overflow：hidden set就可以正常工作.当溢出设置为隐藏时,单个图像的绝对定位不再有效.当我对图像的左边属性使用负值时,它也可以与溢出隐藏.
溢出：隐藏改变绝对孩子的布局方式？
有人有解决这个问题的办法吗？
来源
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;
}
解决方法
所以昨天晚上,我正在玩弄它,但无法解决它(直到:) :).
测试箱1
虽然简化了我从图像元素中删除了不透明度,只留下了一个图像和一个链接.我最初将图像设置为390px,以便我可以确保它位于该位置(您可以看到左边的一点点).
http://codepen.io/anon/pen/tpCrc
结论：
那么重要的是要注意的是,图像最初是在那里应该是.
然后当点击按钮1时,您可以看到它只是跳过转换.
所以浏览器不会改变元素的位置,因为overflow：hidden(像这个帖子的标题).它进入CSS中提到的位置(在：目标部分),但没有过渡.
测试箱2
然后我想知道浏览器为什么会这样做,我一直在想,也许这个图像元素的重点与它有关.
如果您考虑：点击其中一个按钮时,您可以向页面和浏览器的URL添加#target,然后尝试“滚动”到该元素.为此,这个要素必须是可见的.
所以我想知道：也许CSS与它无关.咱们试试吧：
所以我完全删除了：目标部分和转换.
http://codepen.io/anon/pen/IvfBE
结论：
哇！我们在那里看到什么？当点击其中一个按钮时,图像仍然向左跳：0！
我想我们在那里领先.
尽管如此,我还不知道如何解决这个问题.仍然像我的浏览器错误.
修复
然后 – 在睡梦一夜之后,我醒来了一个全新的想法.
如果我们没有实际定位要转换的元素怎么办？
所以我添加了一个容器到每个图像元素,并以此为目标.
<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>
在CSS中,图像的位置现在必须由“[parentElement]：target img”更改.
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;
}
和工作实例：
http://codepen.io/anon/pen/lyzhi
结论：
好极了！！实际上,不要把焦点放在你想要转换的元素上,它不会破坏.
所以,你已经在那里修复了,但它似乎仍然是一个浏览器/引擎错误.
所以我建议你在某个地方创建一个bug报告(如果你有时间).
BTW：我已经在Chrome和IE中测试了这两个最新版本.您可能需要在Firefox或其他浏览器中进行测试.
