HTML / CSS columns overlap - html

Question

I made a fiddle here.
Why does dice-canvas-container use the full width of the window and not stop at the start of attack-canvas-container?
Is it because both columns are positioned absolute?
<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

If suitable with your requirement then you can go with flex css instead of 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>
Check the updated Fiddle.

Answer 2

Because you are using position: absolute (1) with width: 100% (2) for both containers in combination with z-index (3).
(1) : because of this, both container are absolutely positioned, not relatively.
(2) : since both have 100% width, they will overlap the other one.
(3) : the one with the higher z-index wins the upper hand.
You need to change the absolute positioning and give proper widths to the divs.