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
from Set element to special coordinates even with position relative?
No comments:
Post a Comment