[CSS] - position : static, relative, absolute, fixed
○ position : static, relative, absolute, fixed |
1. static(position을 주지 않았을 때, 지정된 위치에 있는 상태, default, 정적 배치) 2. relative(상대 배치, 상대는 고정하고 나만 움직이는 상태) 3. absolute(절대 배치, 무조건 0, 0에서 시작하며, 부모가 relative일 경우 거기 좌표부터 시작) 4. 부모는 relative, 자식은 absolute 5. fixed(고정 배치, 광고 사용, 스크롤바 내려도 위치 고정, 고정 메뉴 사용) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> * { margin:0; padding:0; } #parent { width:280px; height:210px; border:solid 5px #000000; /* 테두리 설정 */ margin:50px 0 0 50px; /* 시계방향 위 오른 아래 왼 */ } #box1, #box2, #box3 { width:70px; height:70px; } #box1 { background-color:#ff0000; } /* id 는 #아이디명으로 제어 */ #box2 { background-color:#00ff00; } #box3 { background-color:#ffff00; } #parent { position:relative; } #box2 { position:absolute; top:20px; left:30px; } </style> </head> <body> <div id="parent"> <div id="box1">A</div> <div id="box2">B</div> <div id="box3">C</div> </div> </body> </html> |
'CSS' 카테고리의 다른 글
| [CSS] - owlcarousel 이용한 다중 캐러셀에서 a href 안될 때 해결법 (0) | 2018.09.29 |
|---|---|
| [CSS] - bxslider 이용한 캐러셀, owlcarousel 이용한 다중 캐러셀 (0) | 2018.09.28 |
| [CSS] - <input type=" ">에 효과 주기, 둥근 테두리 만들기 (0) | 2018.09.18 |
| [CSS] - after, hover, list-child 등을 이용한 간단한 테스트 (0) | 2018.09.15 |
| [CSS] - display : block, inline 그리고 메뉴 만들기 (0) | 2018.09.13 |