[CSS]-2. POSITION

안녕하세요. 오늘은 position에 대해 적어보겠습니다.

 

*POSITION

 

STATIC(정적 위치)	posistion 속성 값을 직접 입력하지 않아도 나오는 기본값
RELATIVE(상대적 위치)	position이 static이었을때의 위치를 기준으로 움직인다. (자기 공간에서 움직임)
ABSOLUTE(절대적 위치)	position이 static이 아닌 가장 가까운 부모 / 선조를 기준으로 움직인다. (모두 static일때는 body에 영향을 받음)
FIXED(고정된 위치)	스크롤에 구애 받지 않고 위치를 사수하며 크기나 위치는 문서를 기준으로 한다. (부모 관계가 없음)

 

1. STATIC

 

      body > article > section:first-child {
            width: 50%;
            height: 50%;
            background-color: #50505e;
            top: 10px;
            bottom: 10px;
        }

        body > article > section:last-child {
            width: 50%;
            height: 50%;
            background-color: #70505e;
            top: 10px;
            bottom: 10px;
        }

 

값을 넣지 않으면 기본적으로 스태틱 값이 들어가서 박스의 움직임(top, bottom을 통해 10px을 조정)이 없는 것을 볼 수 있습니다.

 

 

2. RELATIVE

 

   body > article > section:first-child {
            width: 50%;
            height: 50%;
            background-color: #50505e;
            position: relative;
            top: 10px;
            bottom: 10px;
            
        }

        body > article > section:last-child {
            width: 50%;
            height: 50%;
            background-color: #70505e;
            position: relative;
            top: 10px;
            bottom: 10px;

        }

 

기존의 위치에서 떨어졌는 게 보이시나요?

static의 사진은 푸터가 가려지지 않았지만 relative의 경우 푸터가 가려져 있는 것을 볼 수 있습니다. 물론 이 부분의 경우 떠있는 게 정확한 표현이지만 차후에 설명하도록 하겠습니다. 

 

 

3. ABSOLUTE

(1) 부모가 STATIC인 경우

 

        body > article {
            width: 1200px;
            height: 300px;
            background-color: #ffffff;
            border-left: 2px solid black;
            border-right: 2px solid black;
            border-bottom: 2px solid black;
            
        }

        body > article > section:first-child {
            width: 50%;
            height: 50%;
            background-color: #50505e;
            position: absolute;
            top: 10px;
            bottom: 10px;
            
        }

        body > article > section:last-child {
            width: 50%;
            height: 50%;
            background-color: #70505e;
            position: absolute;
            top: 10px;
            bottom: 10px;

        }

 

두 가지가 합쳐서 보이는 사진입니다.

다음의 경우에는 body > article의 position이 기본값 즉, position=static;으로 되어 있기 때문에 body의 영향을 받아서 body 부분을 기점으로 움직이게 됩니다. 합쳐 보이는 이유는 앞서 푸터가 가려진 것처럼 섹션 1이 가려져서 섹션 2가 보이게 되는 것입니다. 사실 이 부분은 앞서 말한 것과 같이 섹션 2가 섹션 1위에 떠있다고 생각하시면 됩니다.

 

 

(2) 부모가 STATIC이 아닌 경우

 

   body > article {
            width: 1200px;
            height: 300px;
            background-color: #ffffff;
            border-left: 2px solid black;
            border-right: 2px solid black;
            border-bottom: 2px solid black;
            position: relative;
        }

        body > article > section:first-child {
            width: 50%;
            height: 50%;
            background-color: #50505e;
            position: absolute;
            top: 10px;
            left: 10px;
            
        }

        body > article > section:last-child {
            width: 50%;
            height: 50%;
            background-color: #70505e;
            position: absolute;
            top: 10px;
            left: 10px;

        }

 

빨간색 박스 안에서 움직이는 것이 보이나요?

가장 가까운 부모인 body > article의 position이 relative이므로 article의 자식인 section 1, section 2는 부모의 영역 안에서 움직이게 됩니다.

 

 

4. FIXED

 

    body > article > section:first-child {
            width: 50%;
            height: 50%;
            background-color: #50505e;
            position: fixed;
            top: 10px;
            left: 10px;
            
        }

        body > article > section:last-child {
            width: 50%;
            height: 50%;
            background-color: #70505e;
            position: absolute;
            top: 10px;
            left: 10px;

        }

 

섹션 1만 position: fixed;

fixed는 부모의 영향도 받지 않고 자기 혼자 독립되어 위치나 크기는 문서를 기준으로 받게 됩니다.

스크롤에도 영향을 받지 않기 때문에 화면을 축소하여 보여드리겠습니다.

 

 

빨간색 박스를 보세요!

빨간색 박스를 보시면 제가 스크롤을 조금 내렸습니다. 하지만 섹션 1 부분은 고정적으로 상단에 떠있는 것을 확인할 수 있습니다.

 

 

---

 

포스팅을 마무리하며 오늘은 간단하게 position에 대해 알아 보았습니다. 상세한 내용으로 position의 내용을 다시 한번 정리하겠습니다.