如何设置溢出隐藏但不影响某些元素

Question

我有一个div隐藏溢出设置，以便剪切图像：

右边的图像（设备），但它影响左边的弹出窗口，必须在那里。

.hero {
    position: relative;
    padding: 32px 0 0;
    min-height: 504px;
    background: #D91A37 url(../images/flagscape-bg.jpg) 0 0/cover no-repeat;
    overflow: hidden;
}

该弹出窗口已经应用了z-index，但由于红色背景div上隐藏了溢出，因此无法正常工作。

那么，有没有办法制定这个规则而不是触及左边的所有弹出窗口？

Answer 1

您应该使用position: absolute作为弹出窗口，以便弹出窗口不会继承父窗口上定义的属性。

您的代码应该是：

.popup {
  position: absolute:
  top: 50px;
  left: 20px;
  z-index: 10;
}

并向position: relative和hero上方的一般家长提供popup。