html - 强制子元素在溢出之外可见 :hidden parent

Question

我找到的唯一解决方案是在我想完全看到的元素上放置一个position: fixed。还有其他选择吗？ (我不想固定“cool-image”)。帮助或提示会很棒。另外，如果有人能解释解决方案 - 那会更好

fiddle :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 时，子元素只能在父区域内更改。

如果你不想让 child 固定，你可以尝试position:absolute; 并将父设置为position:relative;

像这样...

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

或者您可以尝试只隐藏 1 个方向的溢出。比如overflow-y:hidden; 或者overflow-x:hidden;