绝对子元素在超出其父容器时消失

Question

在我的示例中，子元素是 indicators。它的位置设置为 absolute，底部设置为 0。其父容器设置为位置 relative。所以我希望当我将它的底部设置为 like -40px 时，它会被推出父容器。但是当它超出父容器时它就消失了。

HTML:

<div class="carousel carousel-slider" style="width:30%;margin:auto" >
    <div class="carousel-item">
        <img class="responsive-img" src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" />
    </div>
    <div class="carousel-item">
        <img class="responsive-img" src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" />
    </div>
    <div class="carousel-item">
        <img class="responsive-img" src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" />
    </div>
</div>

相关CSS:

.carousel .indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: -30px; //it cannot go over -40px otherwise disapper
 }

示例中链接了其他不相关的代码，此处未全部显示，否则 post 会被加载。

I am the example

Answer 1

你的 .carousel 有一个 overflow: hidden; 这就是它们消失的原因。

绝对子元素在超出其父容器时消失

The absolute child element disappear when going beyond its parent container

css

materialize