Question

为什么dice-canvas-container使用窗口的整个宽度而不是在attack-canvas-container的开头停止？

是因为两列都是绝对的吗？

<div id="attack-container">
    <div id="dice-canvas-container">
         <div id="plyra-dice-canvas"></div>
         <div id="plyrb-dice-canvas"></div>
     </div>
     <div id="attack-canvas-container">
           ..................
     </div>
</div>

Answer 1

如果符合您的要求，您可以使用flex css代替position: absolute

#attack-container {
  padding: 0;
  text-align: center;
  /* position: absolute; */
  max-width: 1728px;
  max-height: 1080px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1047;
  /* float:left; */
  display:flex;
}

#dice-canvas-container {
  padding: 0;
  text-align: center;
  max-width: 1428px !important;
  max-height: 1080px;
  width: 100%;
  height: 100%;
  /* position: absolute; */
  left: 0;
  top: 0;
  opacity: 0.8;
  z-index: 1048;
  /* display: block; */
  /* float:left; */
  background-color: red;
  min-height:150px;
}

#attack-canvas-container {
  @extend %background-gradient;
  max-width: 300px;
  max-height: 1080px;
  font-size: 90%;
  width: 100%;
  height: 100%;
  z-index: 1048;
  /* position: absolute; */
  right: 0;
  top: 0;
  box-sizing: border-box;
  text-align: left;
  -webkit-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
  -moz-box-shadow:    -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
  box-shadow:         -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
  min-height: 150px;
}

#plyra-dice-canvas,
#plyrb-dice-canvas {
  padding: 0;
  text-align: left;

  position: absolute;
  max-width: 1428px;
  max-height: 540px;
  width: 100%;
  height: 50%;
  z-index: 1049;
}
#plyra-dice-canvas {
  left: 0;
  top: 0;
  height: 50%;
}
#plyrb-dice-canvas {
  left: 0;
  top: 50%;
  height: 50%;
  border-top: 1px solid $brand-primary;
}

        <div id="attack-container">
            <div id="dice-canvas-container">
                <div id="plyra-dice-canvas"></div>
                <div id="plyrb-dice-canvas"></div>
            </div>
            <div id="attack-canvas-container">
            </div>
        </div>

检查更新后的Fiddle.

Answer 2

因为您将position: absolute（1）与width: 100%（2）用于z-index（3）的两个容器。

（1）：因此，两个容器都是绝对定位的，而不是相对的（2）：由于两者都有100％的宽度，它们将与另一个重叠（3）：具有较高z-index的那个赢得优势。

您需要更改绝对定位并为div提供适当的宽度。

HTML / CSS列重叠

2 个答案: