Блог

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

carousel.component.html

 lt;div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"gt;  lt;div class="carousel-indicators"gt;  lt;button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"gt;lt;/buttongt;  lt;button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"gt;lt;/buttongt;  lt;button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"gt;lt;/buttongt;  lt;/divgt;  lt;div class="carousel-inner"gt;  lt;div class="carousel-item active"gt;  lt;img src="assets/myimg8.jpg" class="d-block w-100 myImg" alt="..."gt;  lt;button type="button" class="btn btn-dark myButton"gt;Darklt;/buttongt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img src="assets/myimg.jpg" class="d-block w-100" alt="..."gt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img src="assets/myimg6.jpg" class="d-block w-100" alt="..."gt;  lt;/divgt;  lt;/divgt;  lt;button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"gt;  lt;span class="carousel-control-prev-icon" aria-hidden="true"gt;lt;/spangt;  lt;span class="visually-hidden"gt;Previouslt;/spangt;  lt;/buttongt;  lt;button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"gt;  lt;span class="carousel-control-next-icon" aria-hidden="true"gt;lt;/spangt;  lt;span class="visually-hidden"gt;Nextlt;/spangt;  lt;/buttongt; lt;/divgt;  

карусель.компонент.scss

 .carousel-item{  position: relative; }  .carousel-item button {  position: absolute; }  

На самом деле, ваша проблема не в z-index собственности. Заменять

 position: absolute;  

с

 position: relative;  

и ты увидишь это снова.

Теперь, после использования относительного значения, вы можете использовать одно из следующих свойств : top , left , bottom и right .

Если вы хотите, чтобы ваша кнопка располагалась поверх изображения, решением может быть следующее :

 .carousel-inner button {  position: relative;  top: -7em; }