Vue + Laravel 프로젝트에서 Z-index가 vue-awesome-swiper와 작동하지 않습니다.

Question

저는 Vue + LAravel 프로젝트에서 vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper를 사용하고 있습니다.

이것이 제가 달성하고 싶은 결과입니다. 슬라이딩 화살표는 상단에 있으며 클릭할 수 있습니다.

대신 제가 구현하고 있는 것은 이것입니다. 슬라이딩 화살표는 상단에 있지 않으며 클릭할 수 없습니다.

vue-awesome-swiper가 작동하려면 코드가 특정 형식을 따라야 합니다.

내가 사용하고 있는 스와이프 코드는 다음과 같습니다:

으아악

슬라이더 스크립트는 다음과 같습니다.

으아악

스타일은 다음과 같습니다.

으아악

보시다시피 스와이프 버튼은 Z-색인이 더 높지만 .swiper-caption div 위에 있지 않습니다. 슬라이딩 버튼과 슬라이딩 제목이 동일한 div에 있도록 HTML 코드의 구조를 다음과 같이 변경해 보았습니다.

으아악

하지만 위의 코드를 사용하면 결과는 다음과 같습니다. 슬라이딩 버튼과 슬라이딩 제목이 사라졌습니다. 아마도 vue-awesome-swiper 구조에서 슬라이딩 버튼이 다른 div 안에 있을 수 없기 때문일 것입니다. 이유는 모르겠습니다.

올바른 결과를 얻는 방법에 대한 제안 사항이 있나요?

Answer 1

하위 요소에서 999999 Z-색인 값 및/또는 상대 위치 및/또는 절대 위치를 사용해 보세요.