Friday, 23 August 2019

Set element to special coordinates even with position relative?

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