position 속성에 대한 문의

안녕하세요? 강의 잘 듣고 있습니다. position을 연습하다가 이해가 도저히 안되어서 문의드립니다. div를 이용하여 box를 3개 동일한 Level로 구현하고 그중 하나의 box속에 다시 box 하나를 만들었습니다. box1 box2 box3 box3-1 그리고 box 전체에 display= inline-block을 주면 box가 가로로 1열로 배열되어야 하는데 모양이 box1, box2는 아래로 조금 내려가고 box3은 예상대로 나타납니다. 그런데 box3-1에 display=absolute로 주면 가로 1자로 배열이 됩니다. 무엇 때문인가요? browser image를 첨부로 붙여으면 하는데 방법을 몰라서. 소스코드를 붙입니다. /* * { margin: 2px; padding: 0px;} */ li { list-style: none;} #wrap { border: 2px solid #408080; /* position: static; */ background-color: #9B6F6F; overflow: hidden; } #box1, #box2, #box3, #box3-1 { width: 100px; height: 100px; display: inline-block; margin: 0px; /* padding: 20px; */ /* float: left; */ } #box1 { /* width: 100px; */ /* height: 100px; */ border: 1px solid #408080; position: static; background-color: violet; /* float: left; */ /* display: inline-block; */ } #box2 { /* width: 100px; */ /* height: 100px; */ border: 1px solid #408080; position: relative; background-color: blue; /* float: left; */ /* display: inline-block; */ } #box3 { /* width: 100px; */ /* height: 100px; */ border: 1px solid #408080; position: relative; /* top: 0px; left: 200px; */ background-color: green; /* float: left; */ /* display: inline-block; */ } #box3-1 { width: 50px; height: 50px; border: 1px solid #408080; position: absolute; top: 10px; left: 10px; background-color: red; /* float: left; */ } #box4 { width: 100px; height: 100px; border: 1px solid #408080; /* position: absolute; */ background-color: yellow; /* float: left; */ } box1 box2 box3-1 box3 box4