-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
position 속성에 대한 문의
17.10.11 23:53 작성 조회수 106
0
안녕하세요? 강의 잘 듣고 있습니다.
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
답변을 작성해보세요.
답변 0