強制子元素在溢出之外可見：隱藏的父元素

Question

我發現的唯一解決方案是放置一個position: fixed在我想完全看到的元素上。 還有其他選擇嗎？ （我不想固定“酷像”）。 幫助或提示會很棒。 另外，如果有人可以解釋解決方案-那會更好

小提琴： 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;