css position 알아보기

웹공부/css

css position 알아보기

바구레 2018. 8. 18. 13:29

최근 작업을 하다가 position sticky라는 새로운 속성을 알게되었다

position은 4가지만 있는줄 알았는데 아직 모르는 속성이 있었다니!

그래서 정리해보는 position 속성

우선 position에는 총 5가지가 있다.

static, relative, absolute, sticky

그리고 static을 제외한 4가지 속성은 각각 top, left, bottom, right를 사용하여 위치를 지정할 수 있다

#### position : static

static 요소는 position속성을 지정하지 않은 기본적인 속성이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        div{
            padding:10px;
            width: 500px;
            text-align: center;
            box-sizing: border-box;
        }
        .wrapper{
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            top:10px;
            left: 10px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
Colored by Color Scripter
cs

위 css코드처럼 각각의 div에 아무런 position도 지정하지 않았다.

div에 적용된 padding 10px만 적용되고 .children요소에 준 top과 left값은 전혀 동작하지 않는다

#### position : relative

두번째 relative는 위치를 지정하지 않으면 static과 같다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        .wrapper{
            position: relative;
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            position: relative;
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            position: relative;
            top:10px;
            left: 50px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
Colored by Color Scripter
cs

.wrapper와 부모요소는 relative속성이지만 위치속성을 주지 않았기 때문에 그자리에 그대로 있다

하지만 자식요소(.children)의 경우 top과 left를 지정했기 때문에 원래 위치에서 top으로 10px, left로 50px만큼 이동하게 된다.

또 relative(관계가있는)요소이기 때문에 위치의 변화가 있어도 부모요소 안에서 벗어나지 않았다

#### position : absolute

세번째 absolute는 이름처럼 절대적인 위치를 가지는 속성이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        .wrapper{
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            position: absolute;
            top:10px;
            left: 50px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
Colored by Color Scripter
cs

이미지 처럼 absolute포지션을 가지게 된 자식요소는 자신을 감싸고 있는 부모엘리먼트 중에서 static이 아닌 요소를 찾아 계속 올라가게 된다. 하지만 부모엘리먼트들이 별다른 position을 가지고 있지 않기 때문에 이때 자식요소는 body태그를 기준으로 위치를 이동한다.

또, absolute속성을 사용한 엘리먼트는 공중으로 뜨게 된다. 부모엘리먼트와의 관계가 끊어지게 되는 것이다. 그렇기 때문에 html태그상으론 부모엘리먼트가 자식엘리먼트를 감싸고 있지만 부모엘리먼트는 자식요소를 인식하지 못하게 된다.(ㅠㅠ 흑..자식을 떠나보낸 부모님 ㅠ) 그래서 absolute를 쓰면 부모요소의 높이값을 구해도 자식요소만큼의 높이값을 구할 수 없게 된다. 자식을 자식이라 할 수 없는...

콘솔에서 확인해보자~

relative에서 부모요소의 높이값

absolute에서 부모요소의 높이값

위의 absolute가 부모엘리먼트 중에서 static이 아닌 포지션속성을 찾지 못해 body태그까지 올라갔다면 아래는 상위 태그에서 포지션을 찾았을 경우이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        .wrapper{
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            position: relative;
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            position: absolute;
            top:10px;
            left: 50px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
Colored by Color Scripter
cs

자식요소는 포지션속성을 가진 상위요소를 찾아가다가 부모요소에 relative가 있는것을 발견하고 부모요소를 기준으로 top과 left값을 이동시킨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        .wrapper{
            position: relative;
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            position: absolute;
            top:0px;
            left: 70px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
Colored by Color Scripter
cs

이번

이번에는 부모요소의 포지션속성을 지우고 wrapper에 포지션을 주었다. 이렇게 하면 자식요소는 부모요소이름의 엘리먼트를 지나치게 되고 포지션 속성을 가진 wrapper를 기준으로 위치를 움직인다.

#### position : fixed

position fixed는 부모엘리먼트들의 속성과 상관없이 우리가 보는 화면 뷰포트를 기준으로 위치를 가지게 된다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        .wrapper{
            margin-top:300px;
            position: relative;
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            position: fixed;
            top:0px;
            left: 70px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
Colored by Color Scripter
cs

css를 보면 .wrapper에 포지션 relative가 있음에도 무시하고 화면기준으로 top 0, left 70px 만큼 이동했다. 이처럼 fixed 포지션은 화면기준으로 절대적인 위치를 가지기 때문에 화면에서 항상 고정되어있어야 하는 메뉴들에 자주 사용이 된다. 지금 블로그의 상단도 항상 상단에 위치해있으니 fixed 속성을 가지고 있다는걸 알 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        .wrapper{
            margin-top:300px;
            position: relative;
            background-color: #6b7799;
            border:1px solid #292c33;
        }
        .parents{
            background-color:azure;
            border:1px solid darkred;
        }
        .children{
            position: fixed;
            top:0px;
            left: 70px;;
            background-color: cornflowerblue;
            border :1px solid lightslategrey;
        }
        .children2{
            position: fixed;
            right: 0;
            bottom: 0;
            background-color: #e60073;
            border:1px solid green;
        }
Colored by Color Scripter
cs

자식요소2를 추가하고 fixed 포지션을 새로 주었다.

우측 스크롤바를 보면 알겠지만 fixed 포지션을 가진 엘리먼트들은 스크롤을 해도 항상 우리가 보는 화면 기준으로 고정되어있기 때문에 스크롤과 상관없이 그 자리에 그대로 있다

그리고 fixed 포지션도 absolute와 마찬가지로 공중으로 떠버리기 때문에 부모엘리먼트는 자식엘리먼트를 인식하지 못하게 된다

#### position : sticky

가장 최근에 그 존재를 알게된 sticky!!!

sticky속성은 사용자가 스크롤을 움직일때 자신이 가지고 있던 위치값이 되면 fixed처럼 위치가 고정된다

우선 css코드 먼저. target클래스의 엘리먼트에 포지션 sticky, top 20px을 준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        section{
            width: 550px;
            height: 600px;
            overflow-y: auto;
        }
        div{
            padding:10px;
            width: 500px;
            text-align: center;
            box-sizing: border-box;
            background-color: rgb(79, 109, 241);
            border:1px solid rgb(17, 12, 48);
        }
        div.target{
            position: sticky;
            top:20px;
            background-color: aquamarine;
            border:1px solid slateblue;
        }
Colored by Color Scripter
cs

sticky 속성은 처음엔 마치 static처럼 위치하게 된다. 오른쪽 스크롤바를 유심히 보자!!!

그러다가 스크롤을 올리다가 sticky요소의 top값이 되면 그 위치에서 고정이 된다.

그리고 다시 스크롤을 올리면 원래의 static요소처럼 돌아가게 된다

position sticky를 사용하면 이전에 스크립트를 사용해서 스크롤하다가 고정시키는 요소를 만들던 것을 css만으로도 쉽게 만들 수 있다

단, sticky요소는 IE, 엣지15는 지원하지 않는다. 그리고 사파리브라우저는 -webkit- 접두사를 사용해야한다!!

**** 2018.08.29 추가 ****

오늘 작업중에 알게 된 내용이 있다. 회사에서 하는 프로젝트에 sticky 포지션을 사용하려고 했는데 아무리해도 적용이 되지 않았다

구글링을 해보니 sticky포지션은 body 스크롤 할때만 적용이 된다. 회사에서 사용하려고 했던건 모달창을 띄워 body에 스크롤을 막은채로 position fixed인 모달 내부에 스크롤을 돌려 sticky 포지션을 사용하려 했던 것인데 ㅠㅠ 안타깝게도 사용할수가 없었다

sticky는 body스크롤에서!!! 잊지말자

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다

저작자표시

'웹공부 > css' 카테고리의 다른 글

pure css animation - slot machine (1)	2021.01.21
아이콘이 있는 버튼만들기 (0)	2018.09.19
css calc() 함수 (0)	2018.08.06
좌우로 움직이는 뱃지 애니메이션 (0)	2018.07.26
input / textarea placeholder 색상수정 (0)	2018.06.27

현재글css position 알아보기

생각날때마다 공부한 내용을 기록하는 블로그입니다.

인프런, JavaScript, 웹퍼블리셔, til, 공부, JS, 북클럽, 프론트엔드, 노개북, 노마드코더, javascrip, HTML5, 노마드스터디, 자바스크립트, 클린코드, CSS3, css, 퍼블리셔, html, 퍼블리싱,

Today :
Yesterday :

조금씩 천천히