-
[CSS] position에 관하여프로그래밍/CSS 2021. 4. 29. 22:28
position
relative [부모] : absol보다 상위의 객체로써 얘 안에서 absol 들이 움직임
absolute [자식] : rela 속에서 위치에 속해있음
left, right, top, botton을 통해 위치 구성
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04.29 오늘 배운 것들</title> <style> .mom-box { width: 500px; height: 500px; background-color: blue; position: relative; margin: auto; } .daught-box { width: 300px; height: 100px; background-color: green; position: absolute; right: 100px; top: 10px; } .child-box { width: 100px; height: 100px; background-color: red; position: absolute; right: 10px; top: 10px; } .boy-box { width: 100px; height: 100px; background-color: white; position: absolute; left: 10px; top: 10px; } </style> </head> <body> <div class="mom-box"> <div class="boy-box">옆에꺼</div> <div class="daught-box">메인 타이틀</div> <div class="child-box"></div> </div> </body> </html>
드럽게 기네 ㄷㄷ...
'프로그래밍 > CSS' 카테고리의 다른 글
[TailwindCSS] TailwindCSS사용 5가지의 모범사례 (0) 2023.11.21 [유노코딩] 반응형 웹 Part 1 ~ 7 (0) 2023.06.28 [드림코딩 Css] Flex-box (0) 2023.06.26 [CSS] Display && Position (0) 2023.06.24 띵동코딩 CSS (0) 2023.06.01