[HTML&CSS] position 속성 정리하기!

Language & Solution/HTML&CSS
2019. 10. 10. 14:18

*아래를 누르시면 HTML, CSS 코드 실행환경을 만드실 수 있습니다.

[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기

position 속성

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있죠.

티스토리를 하다보면 css를 수정해야하는 일이 잦습니다. 만약 position 속성에 대한 이해없이 css를 수정한다면 예상치도 못하게 블로그 레이아웃이 이상해지거나 망가질 수 있습니다( Wordpress나 서비스 UI, 프론트엔드쪽 만질 때도 마찬가지!). 딴 건 몰라도 화면단과 관련된 일을 한다면 position 속성에 대한 것은 제대로 집고 넘어가야한다고 생각합니다.

position 사용법

position 속성 사용법은 다음과 같습니다.

position: static | relative | absolute | fixed | sticky

static	요소를 문서 흐름에 맞추어 배치.
relative	이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.
absolute	원하는 위치를 지정해 배치.
fixed	지정한 위치에 고정하여 배치.
sticky	위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에 는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작.

static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인 지를 나타냅니다. 예로들어 top: 15px 면 기준위치 위에서 15px 떨어져 있는 곳에 위치시키라는 뜻입니다.

static

static은 position 속성의 기본값입니다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없습니다. (float 속성은 가능!)

relative

static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 예로들어, static일 때 기준으로 왼쪽으로부터 50px, 위쪽으로부터 30px에 위치해 있다면 style="top:5px; left: 5px;" 을 적용하면 왼쪽으로부터 55px, 위쪽으로부터 35px 이동하는 형식입니다. 상대적 위치는 top, right, bottom, left 속성을 써서 나타낼 수 있습니다.

static, relative 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            margin : 10px;
            display: inline-block;
            width: 300px;
            height: 100px;
            border: 3px solid black;
        }
        .box1 {
            background: firebrick;
        }
        .box2 {
            background: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

위에 명시적으로 position 속성을 써서 나타내지는 않았지만 position: static 속성이라 보시면 됩니다. (기본값)
static 속성은 브라우저에서 자연스럽게 해당 요소들의 위치를 결정하게 됩니다. 보통 display 속성에 따라 배치가 결정됩니다.
위의 요소들은 display: inline-block 에 따라 왼쪽에서 오른쪽으로 요소의 위치가 결정된 걸 볼 수 있습니다.

<style>
    div {
        margin : 10px;
        display: inline-block;
        width: 300px;
        height: 100px;
        border: 3px solid black;
    }
    .box1 {
        background: firebrick;
    }
    .box2 {
        background: cornflowerblue;
        position: relative;
        top: 30px;
        right: 150px;
    }
</style>

위 static에서 쓴 코드에서 위 <style> 태그를 교체하면 위와 같이 겹친 요소가 나타나는 것을 볼 수 있습니다.
static과 다르게 relative는 static 이었을 때 어느 위치였는지를 기준으로 상대적인 요소의 위치를 결정합니다.
위 그림에서는 파란색 요소가 원래 static 위치를 기준으로 위에서 30px, 오른쪽에서 150px 떨어진 것을 알 수 있습니다.

absolute

absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다.

이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소입니다.

absolute 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            border: 3px solid black;
        }
        .container {
            margin: 40px;
            width: 800px;
            height: 1000px;
        }
        .box1 {
            width: 200px;
            height: 100px;
            background: red;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box2 {
            width: 200px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
    </div>
</body>
</html>

위에서 볼 수 있듯 빨간색 요소 box1는 position: relative 이기 때문에 원래 static 이었을 때의 자리로부터 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는 모습을 볼 수 있습니다.
반면에 파란 요소 box2는 position: absolute이기 때문에 브라우저 왼쪽 상단 기준 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는 모습을 볼 수 있습니다.
만약 container 요소가 position: relative 였다면 파란요소와 빨간요소는 완벽히 겹친 형태로 나타날 것 입니다. (위 코드를 가지고 테스트해보시면 금방 알 수 있습니다)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #wrap {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background: #0094ff;
        }
        #crd1 {
            top:0;
            left:0;
        }
        #crd2 {
            top:0;
            right:0;
        }
        #crd3 {
            bottom: 0;
            left: 0;
        }
        #crd4 {
            bottom: 0;
            right: 0;
        }
        #crd5 {
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="box" id="crd1">

        </div>
        <div class="box" id="crd2">

        </div>
        <div class="box" id="crd3">

        </div>
        <div class="box" id="crd4">

        </div>
        <div class="box" id="crd5">

        </div>
    </div>
</body>
</html>

부모 요소가 position: relative일 때 그 자식요소에 absolute 속성값을 넣고 부모 요소 안에서 자식 요소들을 원할 하게 배치하고 있는 모습입니다.
참고로 top, left, right, bottom은 그 기준으로부터 얼마만큼 떨어졌나를 나타낸 것입니다. 이 점 헷갈리지 않게 참고하시면서 요소를 배치하는 것이 중요합니다.

fixed

fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다. (기준점: 브라우저 왼쪽 위 꼭지점)

fixed 예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#content {
margin: 20px;
padding: 20px;
position: relative;
width: 300px;
height: auto;
border: 1px solid #ccc;
}
#ask-icon {
border: none;
width: 100px;
height: 100px;
position: fixed;
bottom: 30px;
right: 30px;
border-radius: 30px;
background: cornflowerblue;
line-height: 100px;
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">
<p>대통령은 헌법과 법률이 정하는 바에 의하여 공무원을 임면한다. 의무교육은 무상으로 한다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다. 모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다. 이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다. 근로자는 근로조건의 향상을 위하여 자주적인 단결권·단체교섭권 및 단체행동권을 가진다. 국가는 노인과 청소년의 복지향상을 위한 정책을 실시할 의무를 진다.</p>

<p>모든 국민은 법률이 정하는 바에 의하여 국가기관에 문서로 청원할 권리를 가진다. 국교는 인정되지 아니하며, 종교와 정치는 분리된다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 헌법재판소의 장은 국회의 동의를 얻어 재판관중에서 대통령이 임명한다. 국민의 자유와 권리는 헌법에 열거되지 아니한 이유로 경시되지 아니한다. 이 헌법시행 당시의 대법원장과 대법원판사가 아닌 법관은 제1항 단서의 규정에 불구하고 이 헌법에 의하여 임명된 것으로 본다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다. 국무회의는 대통령·국무총리와 15인 이상 30인 이하의 국무위원으로 구성한다.</p>

<p>혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로 성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 설립은 자유이며, 복수정당제는 보장된다. 각급 선거관리위원회는 선거인명부의 작성등 선거사무와 국민투표사무에 관하여 관계 행정기관에 필요한 지시를 할 수 있다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다. 국군의 조직과 편성은 법률로 정한다. 모든 국민은 주거의 자유를 침해받지 아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다. 국가안전보장회의는 대통령이 주재한다.</p>

<p>헌법재판소의 조직과 운영 기타 필요한 사항은 법률로 정한다. 헌법개정안은 국회가 의결한 후 30일 이내에 국민투표에 붙여 국회의원선거권자 과반수의 투표와 투표자 과반수의 찬성을 얻어야 한다. 대통령은 필요하다고 인정할 때에는 외교·국방·통일 기타 국가안위에 관한 중요정책을 국민투표에 붙일 수 있다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할 수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다. 모든 국민은 건강하고 쾌적한 환경에서 생활할 권리를 가지며, 국가와 국민은 환경보전을 위하여 노력하여야 한다.</p>

<p>모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 대법원장의 임기는 6년으로 하며, 중임할 수 없다. 공무원은 국민전체에 대한 봉사자이며, 국민에 대하여 책임을 진다. 모든 국민은 인간다운 생활을 할 권리를 가진다. 공무원의 직무상 불법행위로 손해를 받은 국민은 법률이 정하는 바에 의하여 국가 또는 공공단체에 정당한 배상을 청구할 수 있다. 이 경우 공무원 자신의 책임은 면제되지 아니한다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다.</p>

</div>
<div id="ask-icon">
문의하기
</div>
</body>
</html>

'문의하기' 요소가 브라우저를 위에서 아래로 스크롤 해도 브라우저 창에 붙어있는 것을 볼 수 있습니다.
이 fixed 요소를 가지고 문의하기, Q&A, 대화창 등 서비스 사용자에게 계속적으로 노출해야하는 요소를 브라우저 창에 삽입할 수 있습니다.

sticky

sticky 속성은 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작하게 됩니다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 됩니다.

기준점을 설명하자면 top:50px인 sticky 속성을 예로 들어 보겠습니다. 스크롤를 내렸을 때 뷰포트(viewport)와 요소 사이의 거리가 50px 이상이면 relative처럼 동작하다 50px 이하가 됬을 때 기준점을 넘은 것으로 보고 그때부터 fixed 요소처럼 동작하게 됩니다. 뷰포트(viewport)는 현재 사용자에게 보이는 브라우저 창이라고 생각하시면 됩니다.

scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻합니다. 여기서 부모요소가 overflow를 특별히 명시하지 않았다면 부모요소가 바로 scroll 박스가 됩니다!

만일, scroll 박스 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야 합니다.

sticky 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            height: 1000px;
            border: black solid 5px;
            margin: 30px;
            display: inline-block;
            color: white;
        }
        .scroll {
            overflow:visible;
            display: block;
        }
        .static {
            width: 150px;
            height: 150px;
            border: none;
            background: gray;
            text-align: center;
            line-height: 150px;
        }
        .sticky {
            width: 150px;
            height: 150px;
            border: none;
            background: blue;
            text-align: center;
            line-height: 150px;
            position: sticky;
            top: 50px;
        }
        .fixed {
            width: 150px;
            height: 150px;
            border: none;
            background: red;
            text-align: center;
            line-height: 150px;
            position: fixed;
            bottom: 150px;
        }
    </style>
</head>
<body>

<div class="scroll">
    <div class="static">
        .static
    </div>
    <div class="sticky">
        .sticky
    </div>
    <div class="fixed">
        .fixed
    </div>
</div>
<div class="scroll">
    <div class="static">
        .static
    </div>
    <div class="sticky">
        .sticky
    </div>
</div>
<div class="scroll">

</div>
</body>
</html>

fixed 와 sticky 요소를 혼합한 예제입니다. 스크롤를 내리면 fixed 요소는 브라우저 특정 위치에 그대로 있는 반면에 sticky요소는 특정 시점에서 fixed 요소처럼 행동하다 자신의 부모 요소와 만나게 되면 멈추는 모습을 볼 수 있습니다.
sticky 요소가 중간에 멈추는 기준은 부모 요소의 크기 내에서 멈추게 됩니다. sticky 요소는 부모 요소 정확히 override: hidden 이 아닌 요소의 크기 밖으로 나갈 수 없습니다.
만약 sticky 요소가 모든 조건을 충족 (위치지정 및 override: hidden 요소 없음) 했는 데도 불구하고 제대로 동작하지 않는다면 부모 요소의 크기가 어떤지를 먼저 체크해봐야 할 것입니다.

저작자표시 비영리 변경금지

'Language & Solution > HTML&CSS' 카테고리의 다른 글

[HTML&CSS] column 속성으로 다단으로 편집 (multi-layout edit) (1)	2019.10.22
[HTML&CSS] box-sizing, float, clear (0)	2019.10.08
[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성 (0)	2019.10.08
[HTML&CSS] 콘텐츠(content) 영역 (0)	2019.10.07
[HTML&CSS] 테두리(border) 영역 (0)	2019.10.07