Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 387
Filip Degenhart Avatar asked Oct 15 '22 12:10

Filip Degenhart


1 Answers

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.

like image 109
Filip Degenhart Avatar answered Nov 15 '22 05:11

Filip Degenhart