[css] 포지셔닝

position

요소의 위치를 바꿔주는 속성이며, 기본값은 static이다.

 

 

relative

/* css */
i {
      position: relative;
      top: 30px;
}

<!-- html -->
구글(영어: Google LLC)은 <i>구글</i> 검색을 중심으로 스마트폰 운영체제인 안드로이드와 유튜브 사업, 클라우드 사업을 하는 미국의 기업이다. 다양한 구글 서비스들(메일, 크롬, 지도, 어스, 포토 등)과 함께 '전 세계의 모든 정보들을 체계화하여 모든 사용자가 유익하게 사용할 수 있도록 한다'라는 사명을 가지고 사업을 하고 있다. 인터넷을 사용하여 정보를 공유하는 산업의 가장 큰 기업이며 세계에서 가장 많은 데이터센터, 통신 네트워크와 함께 매일 수십억 명의 사람들에게 수백억 번의 서비스를 제공하고 있다. 2022년 7월 현재 전 세계 검색엔진, 검색량의 90% 이상의 점유율을 가지고 있다.

다른 글자들의 위치에 상관없이 position: relative;를 달아준 요소의 글자의 위치가 변하여 위로 30px만큼 공간이 생겼다.

 

따라서 오른쪽으로 이동시키고 싶다면, left를, 위쪽으로 이동시키고 싶다면 bottom을 사용하는 것처럼 반대의 속성을 적어주어야한다.

 

 

margin과의 차이

margin도 position: relative와 같이 요소가 이동을 하지만, 다른 요소들도 함께 이동한다는 차이가 있다.

 

 

fixed

현 위치와 상관없이 웹 화면을 기준으로 시행되며, scroll해도 움직이지 않는다.

/* css */
i {
      position: fixed;
      top: 30px;
}

<!-- html -->
구글(영어: Google LLC)은 <i>구글</i> 검색을 중심으로 스마트폰 운영체제인 안드로이드와 유튜브 사업, 클라우드 사업을 하는 미국의 기업이다. 다양한 구글 서비스들(메일, 크롬, 지도, 어스, 포토 등)과 함께 '전 세계의 모든 정보들을 체계화하여 모든 사용자가 유익하게 사용할 수 있도록 한다'라는 사명을 가지고 사업을 하고 있다. 인터넷을 사용하여 정보를 공유하는 산업의 가장 큰 기업이며 세계에서 가장 많은 데이터센터, 통신 네트워크와 함께 매일 수십억 명의 사람들에게 수백억 번의 서비스를 제공하고 있다. 2022년 7월 현재 전 세계 검색엔진, 검색량의 90% 이상의 점유율을 가지고 있다.

 

absolute

가장 가까운 포지셔닝이 이미 된 조상요소를 기준으로 작용한다.

/* css */
    .red {
      background-color: #ff0000;
      width: 500px;
      height: 500px;
    }

    .green {
      background-color: green;
      width: 300px;
      height: 300px;
      position: relative;
      top: 40px;
      bottom: 90px;
    }

    .blue {
      background-color: blue;
      width: 100px;
      height: 100px;
      position: absolute;
      bottom: 40px;
    }

<!-- html -->
  <div class="red">
    <div class="green">
      <div class="blue"></div>
    </div>
  </div>

위 코드에서 .blue에서 사용한 absolute는 가장 가까운 .green의 relative 조건이 기준이 되어, 거기서 부터 밑으로 40px내려갔다.