Frontend

day04_position_(1) relative

AIHYEONJI 2025. 4. 4. 12:44

1. position 
- CSS에서 요소의 위치를 제어하는 속성
- 요소가 문서 내에서 어디에, 어떻게 배치될지를 결정하는 데 사용
    - 기본값 : static(일반적인 문서 흐름에 따라 배치)
    - relative : 자신의 원래 위치를 기준으로 이동
    - absolute : 가장 가까운 위치 지정 부모 요소를 기준 
    - fixed : 브라우저 화면 기준(스크롤 해도 위치변화X) 
    - stick : 특정위치에 고정되는 하이브리드 속성에

1.1 relative
- position:relative(부모요소에 적용) : 자신이 원래 있어야 할 위치를 기준으로 상하좌우로 이동, 이동하더라도 원래 위치의 공간은 유지

cf. z-index : 쌓이는 순서를 지정하는 속성으로 0<=z 값을 적어주는데 
            값이 큰 순서대로 보인다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Relative</title>
    <style>
      .container {
        background-color: #eee;
        padding: 40px;
        /* relative는 부모요소에 적용 */
        position: relative;
        height: 300px;
      }
      .box {
        width: 150px;
        height: 150px;
        background-color: #4caf50;
        color: white;
        font-weight: bold;
        line-height: 150px;
        text-align: center;
        margin-bottom: 20px;
        /* relative는 부모요소에 적용 */
        position: relative;
      }
      .relative-box {
        background-color: #ff9800;
        /* 자식요소의 relative */
        top: -100px;
        left: 80px;
      }
      .default-box {
        /* z-index : 겹쳤을 때 값을 주면
        (큰 값이)맨 위로 올라감. */
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box default-box">기본 박스</div>
      <div class="box relative-box">relative 박스</div>
    </div>
  </body>
</html>