Абсолютный дочерний элемент исчезает при выходе за пределы родительского контейнера - PullRequest
Новая
       5

Абсолютный дочерний элемент исчезает при выходе за пределы родительского контейнера

0 голосов
/ 28 июня 2018

В моем примере дочерним элементом является 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
 }

Другие коды, не относящиеся к делу, связаны в этом примере и не показывают их все здесь, в противном случае сообщение будет заблокировано.

Я пример

1 Ответ

0 голосов
/ 28 июня 2018

У вашего .carousel есть overflow: hidden;, поэтому они исчезают.

...