即使使用相对位置，也可以将元素设置到特定坐标吗？

Question

这是我的 <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>  

以下是我的额外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;
}  

系统：
如您所见，我使用的是Swiper。当有人单击Swiper子元素时，我使用下面这段JS代码将sub_loading_help容器设置在特定位置覆盖在Swiper上方：

var s = document.getElementById('sub_loading_help');
s.style.position = "absolute";
s.style.left = '15px';
s.style.top = '15px';  

问题：
我知道我需要将sub_loading_help的style.position设置为absolute，这样才能将元素设置到特定位置。但是容器(sub_loading_help)如果设置为relative，它只会出现在顶部。那么如何将元素设置到特定坐标并使其溢出Swiper？
编辑：
在以下的 codepen 中，它可以正常工作。容器sub_loading_help可以溢出 swiper。但是你需要更改的是 sub_loading_help 的 position 为 absolute，然后你会发现它不再工作了。但是我需要将容器的position：absolute；设置。
https://codepen.io/marcelomb/pen/abomYKo

～filip

- Filip Degenhart

---

你有研究过 z-index 吗？ - Marc Hjorth

@MarcHjorth 已经设置为999。 - Filip Degenhart

如果您为此示例创建了一个Plunker，可能有助于理解问题。 - mulla.azzi

@mulla.azzi 我创建了一个 CodePen。希望能对你有所帮助。 - Filip Degenhart

Answer 1

我明白了，它有效！问题间接与position：absolute有关。我没有为容器设置宽度，并且使用absolute属性，它将宽度设置为0。因此我们无法看到它。

- Filip Degenhart