레이아웃을 위한 CSS 프로퍼티 -position-

position 프로퍼티

element에 position 속성을 걸어주면 

top, bottom, right, left로 움직일 수 있습니다.

 

1. position: relative;

relative에게는 대표적으로 중요한 기능이 두가지 있습니다.

 

1-1. top, bottom, right, left 프로퍼티를 통해 element를 움직일 수 있게 해줍니다.

<!-- HTML 내용 -->

<div class="box">
    <span class="content">내용</span>
</div>

position 속성이 적용되지 않은 상태.

 

/* CSS 내용 */

.box {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

.content {
    position: relative;
    top: 100px;
    right: 20px;
}

웹 영역 밖으로 밀 수도 있다.

 

 

1-2. 다른 position 속성을 가진 자식태그의 이동범위가 됩니다.

<!-- 부모자식 관계를 형성하는 두 개의 박스 -->

<div class="parent-box">
    <div class="child-box"></div>
</div>

/* 기본 CSS 구성 */

.parent-box {
    width: 200px;
    height: 200px;
    background-color: greenyellow;
}

.child-box {
    width: 100px;
    height: 100px;
    background-color: pink;
}

 

여기서 자식태그(핑크 박스)에만 position 프로퍼티를 부여하고 (position: absolute)

top, right, left, bottom 등으로 위치를 조정하면

위 상황처럼, 윈도우의 화면 크기에 따라

element의 위치가 제멋대로 움직이는 상황을 마주하게 됩니다.

이를 방지하기 위해 부모태그에 position: relative 속성을 넣어줍니다.

/* 최종 CSS */

.parent-box {
    width: 200px;
    height: 200px;
    background-color: greenyellow;
    position: relative;
}

.child-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    top: 100px;
    right: 100px;
}

부모 태그의 테두리에 한정되어 더 이상 이리저리 움직이지 않는다.

 

2. position: absolute;

위 1-2 설명에서 쓰였듯

position:absolute;는 해당 element를 부모 position을 기준으로

절대적인 위치에 놓이게 합니다.

 

3. position:fixed;

화면을 스크롤해도 지정된 자리에 고정된 element를 만들 수 있습니다.

상단 검색바, side메뉴 등이 이런 속성을 사용합니다.

네이버 홈에서 최상단 페이지로 이동시켜주는 고정버튼. 

해당 버튼은 fixed로 고정되어 있다.

 

4. position은 스크린리더를 위해 쓰일 수도 있습니다.

시각장애인들을 위한 스크린리더는 웹상의 이미지(로고같은)의 언어적 정보를 읽습니다.

따라서 대부분의 웹사이트는 이런 스크린리더를 위한 태그를 따로 만들어 

정안자들의 눈에는 보이지 않게 처리하고 있는데, 

이때 해당 태그에 position 속성을 집어넣고 웹 영역 밖으로 내보내는 방법을 쓰기도 합니다.

/* 예시 */

.sr-only {
    position: absolute;
    left: -9999px; 
    top: -9999px;
}