Question

我有一个我在http://tympanus.net/codrops/使用的模态样式但是我已经创建了一个自定义关闭按钮（.md-close），当用户滚动时我想要在右上角真正修复模态窗口的内容。

此处代码：http://codepen.io/jeremypbeasley/pen/upzrB

现在滚动时，.md-close会离开可见区域，因此很难在不向上滚动的情况下关闭。我怎么能强迫它留下来？

我意识到这与position属性有关，但我已尝试过父母和孩子的所有可能组合。这可能与我正在使用的transform属性有关吗？

任何帮助？

Answer 1

我使用的完整css：

.md-close {
    position: fixed;
    top: 3vw;
    right: 3vw;
    height: 50px;
    border: 0px;
    cursor: pointer;
    width: 50px;
    background: black;
    text-indent: -9999px;
    overflow: hidden; 
    display: block;
    background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
    background-size: 100%;
  z-index: 99999;
}

.md-trigger {
  width: 300px;
  height: 300px;
  background: blue;
  text-indent: -99999px;
  margin: 100px auto;

}

.md-modal {
  width: 100%;
  max-width: 100000000000px;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  backface-visibility: visible;
}

.md-content {
  max-height: 100%;
  overflow: auto;
  padding: 10% !important;
}

.md-show.md-effect-12 ~ .md-overlay {
  background-color: black;

}

Answer 2

我通过将最大高度100vh添加到.md-content

来解决了这个问题

如何在固定位置div内放置一个真正的固定位置div

2 个答案: