Question

在我的示例中，子元素是indicators。其位置设置为absolute，底部设置为0。其父容器设置为位置relative。因此，当我将其底部设置为-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
 }

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

I am the example

Answer 1

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

当绝对子元素超出其父容器时，它们就会消失

1 个答案: