Nested blocks with positon absolute do not layout correctly #923
Description
<!DOCTYPE html>
<html lang="en">
<head>
<title>Absolute Position Test: Example 31</title>
</head>
<body>
<div id="test-root" style="
display: block;
width: 300px;
height: 200px;
position: relative;
background: red;
margin: 50px auto;
border: 5px solid black;
padding: 15px;
">
<!-- Outer absolute box -->
<div style="
position: absolute;
left: 0;
right: 0;
width: 120px;
height: 80px;
margin-left: auto;
margin-right: auto;
top: 20px;
background: green;
border: 3px solid black;
padding: 10px;
">
Outer Box
<!-- Nested absolute box -->
<div style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 40px;
height: 30px;
margin: auto;
background: yellow;
border: 2px solid blue;
">
Inner Box
</div>
</div>
</div>
</body>
</html>Blitz:
Chrome:
