边界 - 半径，溢出和全屏

Question

我已经看了很多问题，因为我把问题减少到最低限度，但我还没有看到一个合适的解决方案。

对于项目，我必须将TinyMCE放置在具有border-radius的“窗口”中。现在当使用TinyMCE的全屏插件时，编辑器在“窗口”的角落处断开，只有一些部分缺失（它们在那里并且可以被点击，但渲染不会发生）

我在这里有一个代码最小的CodePen https://codepen.io/anon/pen/qoWWJo 预期的结果应该是绿色框覆盖整个屏幕，但在“底层”x层的角落，它可以切出（Chrome）或者只是停留在“窗口”（FireFox）内。

.x-layer {
  position: absolute;
  background: #FF0000;
  width: 350px;
  height: 100px;
  top: 40px;
  left: 100px;
  z-index: 19011;
  overflow: hidden;
  border-radius: 5px 5px 5px 5px;
}

.inner {
  position: fixed;
  top: 0;
  left: 0;
  background: #00FF00;
  width: 100%;
  height: 100%;
  z-index: 100;
}

<div class="x-layer">
  <div class="inner">
  </div>
</div>

我知道这在过去一直没有问题，所以处理组合的任何事情都发生了变化，或者其他事情被破坏了，我现在看不到。

我遇到的问题是，我只能更改CSS和组件的HTML布局。

Answer 1

固定位置始终相对于视口定位。我假设您正在尝试最大化编辑器的空间量，但是您的溢出：隐藏会阻止角落上的按钮被“访问”，因此最好的解决方案是简单地移动内部元素下降5px。

要创建位于绝对定位x层内的内部元素，可以使用绝对定位，例如：

＆＃13;

＆＃13;

.x-layer {
  position: absolute;
  background: #FF0000;
  width: 350px;
  height: 100px;
  top: 40px;
  left: 100px;
  z-index: 19011;
  overflow: hidden;
  border-radius: 5px 5px 5px 5px;  
}
.inner {
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  background: #00FF00;
  z-index: 100;  
}

＆＃13;

<div class="x-layer">    
  <div class="inner">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或相对定位，例如：

＆＃13;

＆＃13;

.x-layer {
  position: absolute;
  background: #FF0000;
  width: 350px;
  height: 100px;
  top: 40px;
  left: 100px;
  z-index: 19011;
  overflow: hidden;
  border-radius: 5px 5px 5px 5px;  
}
.inner {
  position: relative;
  top: 5px;
  width: 100%;
  height: 100%;
  background: #00FF00;
  z-index: 100;  
}

＆＃13;

<div class="x-layer">    
  <div class="inner">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;