Here is a part of my <HTML/>
:
<div style="position: relative">
<div id="sc" class="swiper-container" style="margin: 30px; overflow: hidden;">
<div class="swiper-wrapper">
<div id="swiper_prev_0" class="swiper-slide" onclick="openSub(0, this)">Slide 1</div>
<div id="swiper_prev_1" class="swiper-slide" onclick="openSub(1, this)">Slide 2</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div id="sub_loading_help" class="sub_loading_help"></div>
</div>
And additional my CSS:
.swiper-container {
width: 90%;
height: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
.swiper-container .swiper-slide {
height: 500px;
line-height: 500px;
border-radius: 25px;
}
.sub_loading_help {
position: relative;
z-index: 999;
background: #cc0066;
height: 500px;
border-radius: 25px;
}
The System:
As you see I use a swiper. When somebody clicks on a swiper child I use this JS
code to set the sub_loading_help
container over the swiper at a special position:
var s = document.getElementById('sub_loading_help');
s.style.position = "absolute";
s.style.left = '15px';
s.style.top = '15px';
The Problem:
As I know I need to set the style.position
of sub_loading_help
to absolute
that I can set the element to a special position. But the container (sub_loading_help
) should overflow the swiper. And he only appears on top if I set it to relative
. So how to set the element to the special coordinates AND overflow the Swiper?
EDIT:
In the following codepen it works. The container sub_loading_help
overflows the swiper. But what you have to change is the position
of sub_loading_help
to absolute
. Than you can see it doesnt work anymore. But I need the position: absolute;
at the container.
https://codepen.io/marcelomb/pen/abomYKo
~filip
I got it. It works! The problem is indirectly the position: absolute. I did not set a width for the container and with the property absolute, it set the width to 0. So we cant see it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With