New to CSS and have been trying to learn positioning. Here is my test code:
body {
margin: 0;
}
.red, .yellow, .blue {
height: 200px;
width: 200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
position: absolute;
}
.yellow {
background-color: yellow;
position: absolute;
left: 50px;
top: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
</body>
</html>When I run it, the blue block gets placed below the red. However since its parent is the body, I was expecting it to be placed at the top left corner.
My question is why does absolute positioning behave this way when the top/right/left/bottom properties are not explicitly mentioned? Note that the yellow block, which has top and left defined, gets placed relative to the body.
