Question

我找到的唯一解决方案是在我想要完全看到的元素上添加position: fixed。还有其他选择吗？（我不想＆＃39;酷图像＆＃39;修复）。帮助或提示会很棒。此外，如果任何人都可以解释解决方案 - 那会更好

小提琴：JSFiddle

HTML

<div class="img-cont">
  <div id="slider">
    <ul>
      <li class="slide">
        <img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
        <div class="cool-image"></div>
      </li>
    </ul>
  </div>
</div>

CSS

.img-cont{
    height: 270px;
    position: relative;
}
#slider {
    position: relative;
    background: green;
    overflow: hidden;
    width: 440px;
    height: 200px;
}
#slider ul{
    position: relative;
    margin: 0;
    padding: 0;
}
#slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 440px;
    height: 270px;
    text-align: center;
    line-height: 300px;
}
div.cool-image{
    background-color: white;
    position: absolute;
    border: 5px solid #EEEEEE;
    width: 650px;
    height: 350px;
    z-index: 1;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
    margin-left: -40px; /* Just to product situation */

    display: inline-block;
}

Answer 1

不幸的是，你做不到。当位置未设置为fixed或absolute时，子元素只能在父母区域内更改。

如果您不想修复孩子，可以尝试position:absolute;并将父母设为position: relative;

喜欢这个......

.slide img {
  position: absolute;
  z-index: 2;
}
.slide {
  position: relative;
}

或者您可以尝试仅在1个方向上隐藏溢出。与overflow-y:hidden;或overflow-x: hidden;

一样

强制子元素在溢出之外可见：隐藏父元素

1 个答案: