css – “overflow：hidden”是否改变绝对子女的位置？

我有一个图像库,只能用css将图像滑出.
有关示例或所附代码,请参见 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或其他浏览器中进行测试.

css – “overflow：hidden”是否改变绝对子女的位置？

解决方法

猜你在找的CSS相关文章