Css “溢出：隐藏”是否改变了绝对子对象的位置？

我有一个图像库，只能用css将图像滑入滑出。 有关示例或所附代码，请参见

只要

#images

-div没有设置

溢出：隐藏，它就可以正常工作。当“溢出”设置为“隐藏”时，单个图像的绝对定位不再起作用。当我对图像的
left
-属性使用负值时，它也会对溢出隐藏起作用

overflow:hidden
是否会改变绝对子对象的布局方式

有人能解决这个问题吗


来源

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>

这个难题让我继续前进。我就是不能就这样离开。
所以昨天晚上我在摆弄它，但无法修复它（直到现在：）

测试用例1
在简化的同时，我去掉了图像元素的不透明度，只留下了一个图像和一个链接。我最初将图像设置为390px，以便确保它位于该位置（您可以看到它左侧的一小部分）


结论：

所以需要注意的是，图像最初就在它应该在的地方。
然后单击按钮1，您可以看到它只是跳过了转换。
因此浏览器不会更改元素的位置，因为溢出：隐藏（如本文标题所示）。它转到CSS中提到的位置（在：target部分），但没有转换

测试用例2
然后我想知道为什么浏览器会这样做，我一直在想，也许图像元素的聚焦与此有关。
仔细想想：当你点击其中一个按钮时，你会将#target添加到页面和浏览器的URL中，然后尝试“滚动”到该元素。为此，该元素必须是visisble

所以我想：也许CSS与之无关。让我们试试：
因此，我完全删除了：目标部分和过渡


结论：

哇！我们在那里看到了什么？单击其中一个按钮时，图像仍会跳到左侧：0！！
我想我们有线索了。
尽管如此，我还是不知道如何解决这个问题。对我来说，仍然像是一个浏览器bug

修复
然后，在睡了一个好觉之后，我醒来时有了一个新的想法。
如果我们没有真正针对我们想要转换的元素呢

因此，我为每个图像元素添加了一个容器，并将其作为目标

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

工作示例如下：

结论：

耶！！事实上，如果不将焦点放在您想要转换的元素上，它不会中断。
所以，你已经得到了修复，但在我看来，它仍然像是一个浏览器/引擎错误。
所以我建议你在某处创建一个bug报告（如果你有时间的话）

顺便说一句：我已经在Chrome和IE上测试过了——这两个版本都是最新的。您可能想在Firefox和其他浏览器中测试这一点。
奇怪的是，如果您希望图像来自左侧，它工作正常，请参见我的版本：您是否在图像中的“溢出：隐藏”行中发表了评论？那就不行了这真的很奇怪。如果您将img的位置从400px更改为368px或更低，它确实可以工作！再高一点就坏了…：顺便说一句，在IE中，无论左边位置的值是多少，它都不起作用。这似乎是由于
转换
造成的错误。使用devtools重新设置并取消设置位置：绝对位置暂时修复。非常感谢！它也适用于最新版本的Firefox和Safari。
<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>

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