Question

我有一个动态高度和100％宽度的容器。我试图放置一个X来关闭我所做的模态。但我正试图通过溢出滚动创造性。当用户滚动文本时，我希望将关闭按钮固定到容器的顶部 - 而不是窗口。这可能吗？注意 - 我正在使用硬度高的例子。我也试图避免使用javascript和jQuery。

.otherContent {
  position: relative;
  width: 100%;
  height: 400px;
  padding: 2em;
  overflow-y: scroll;
  background: rgba(0,0,0,0.1);
  z-index: 1;
}

.parentContainer {
  position: relative;
  width: 100%;
  height: 200px;
  padding: 2em;
  overflow-y: scroll;
  background: #eeeeee;
}

.Content {
  position: relative;
 }
 
 .close {
  position: fixed;
  height: 1.2em;
  width: 1.2em;
  color: #FFF;
  background: pink;
  text-align: center;
  top: 0;
  right: 2em;
  z-index: 999;
 }

<div class="otherContent"></div>
<div class="parentContainer">
  <div class="Content">
  <div class="close">X</div>
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
</div>

Answer 1

试试这个

.otherContent {
  position: relative;
  width: 100%;
  height: 400px;
  padding: 2em;
  overflow-y: scroll;
  background: rgba(0,0,0,0.1);
  z-index: 1;
}

.parentContainer {
  position: relative;
  width: 100%;
  height: 200px;
  padding: 2em;
  background: #eeeeee;
}

.Content {
  position: relative;
   overflow-y: scroll;
   height: 200px;
 }

 .close {
  position: absolute;
  height: 1.2em;
  width: 1.2em;
  color: #FFF;
  background: pink;
  text-align: center;
  top: 0;
  right: 2em;
  z-index: 999;
 }

Live JsFiddle - https://jsfiddle.net/grinmax_/drmrd59d/

Answer 2

尝试：

.close {
  position: absolute;
}

我希望它回答

我如何定位：修复了相对于父容器的元素？

2 个答案: