Search code examples
cssmaterialize

The absolute child element disappear when going beyond its parent container

In my example, the child element is the indicators. Its position is set to absolute and bottom to 0. Its parent container is set to position relative. So I expect it to be pushed out of the parent container when I set its bottom to like -40px. But it just disappears when it goes beyond the parent container.

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>

Relevant CSS:

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

Other codes not that relevant are linked in the example, not showing them all here otherwise the post will get bloaded.

I am the example

Solution

  • Your .carousel has an overflow: hidden; thats why they disappear.