It is recommended to use position: relative; in order to achieve inline block behavior for both elements and prevent them from overlapping. This positions the elements inline next to each other as they are recognized as blocks.
When using position: absolute;, the element is no longer recognized as a block and allows for overlapping. The reason behind this behavior is due to how absolute positioning works in relation to its containing block.
Example 1:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Hello </title>
</head>
<body>
<div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
<div class="red" style="display:inline-block; background-color:red; height:100px; width:100px; position: absolute;"></div>
<div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: absolute; left:20px;"></div>
</div>
</body>
</html>Example 2:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Hello </title>
</head>
<body>
<div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
<div class="red" style="display:inline-block; background-color:red; height:100px; width:100px;
position: relative;"></div>
<div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: relative;"></div>
</div>
</body>
</html>