본문 바로가기
개발 관련 지식/CSS

CSS - position : static, relative, absolute, fixed

by 권태일1147 2020. 3. 12.

static

default값이라서 따로 position을 설정하지 않으면 static으로 설정된다.

<html>
<head>
    <style>
        div{
            width: 400px;
            border:5px solid blue;
            margin:5px;
        }
        #me{
            position: static; /* offset 적용이 안된다 */
            left:40px; /* offset */
            top:0 px;  /* offset */
            border: 5px solid red;
        }
    </style>
</head>
<body>
  <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
</body>
</html>

 

relative

부모 엘리먼트의 위치를 기준으로 offset(left, right, top, bottom)을 이용하여 위치 이동이 가능하다.

<html>
<head>
    <style>
        div{
            width: 400px;
            border:5px solid blue;
            margin:5px;
        }
        #me{
          position: relative;  /* 부모 엘리먼트 위치를 기준으로 상대적으로 offset을 사용해서 이동시킬 수 있다. */
          left:40px; /* offset */
          top:0 px;  /* offset */
          border: 5px solid red;
        }
    </style>
</head>
<body>
  <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
</body>
</html>

 

absolute

static이 아닌 부모 엘리먼트를 기준으로 offset이 적용되고, static이 아닌 부모 엘리먼트를 찾아서 단계적으로 찾아간다.

부모 엘리먼트 중에 relative, absolute, fixed가 없다면 body태그를 기준으로 offset이 적용된다.

<html>
  <head>
    <style>
        #parent, #other, #grand{
            width: 200px;
            border:5px solid blue;
        }
        #grand{
            position: relative;
        }
        #me{
            background-color: red;
            color:white;
            position: absolute; /* offset이 있는 경우에는 상위 엘리먼트 중에 static이 아닌 가장 가까운 상위 엘리먼트를 기준으로 잡고 offset을 적용시킨다. */
            left:30px;             /* offset이 없는 경우에는 한단계 바로 위에 있는 상위 element를 기준으로 위치시킨다. */
            top:10px;
        }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="grand">
       grand
        <div id="parent">
           parent
           <div id="me">me</div>
        </div>
    </div>
  </body>
</html>

 

 

fixed

최상위 부모 요소를 기준으로 offset이 적용되고, 스크롤을 올리거나 내려도 해당 위치에 고정된다.

<html>
<head>
    <style>
        body{
            padding-top:30px;
        }
        #parent, #other{
          width: 500px;
          border:5px solid blue;
        }
        #large{
          width: 40px;
          height:10000px;
          background-color: red;
        }
        #me{
          width: 200px;
          background-color: black;
          color:white;
          position: fixed; /* 스크롤과 무관하게 화면의 위치에 고정시킨다. */
          left:150;
          top:150;
          text-align: center;
        }
    </style>
</head>
<body>
  <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
    <div id="large">large</div>
</body>
</html>

스크롤을 올리거나 내려도 me가 화면에 고정된다.

'개발 관련 지식 > CSS' 카테고리의 다른 글

CSS - 미디어쿼리  (0) 2020.03.12
CSS - flex  (0) 2020.03.12
마진 겹침 현상(margin-collapsing)  (0) 2020.03.12
CSS - box-sizing  (0) 2020.03.11
CSS - block vs inline  (0) 2020.03.11