엘리먼트의 위치를 지정하는 프로퍼티는 top, bottom, left, right가 있다. 하지만 이 프로퍼티들은 아래에서 언급 할 position 프로퍼티가 지정되기 전까지는 동작하지 않으며 position 프로퍼티에 어떤 값이 지정되는지에 따라 다른 동작을 한다. position 프로퍼티는 엘리먼트가 위치하는 방법을 정의한다.
position 프로퍼티는 아래의 다섯가지 값중 하나를 가질 수 있다.
- static
- relative
- fixed
- absolute
- sticky
position: static;
position 프로퍼티의 기본 값이며 static 포지션은 top, bottom, left, right 프로퍼티에 영향을 받지 않는다.
position: static; 으로 설정된 엘리먼트는 페이지의 흐름에 따라 위치가 정해질뿐 다른 위치와 관련된 동작을 지정 할 수 없다.
<html>
<head>
<style>
.image-static {
position: static;
border: 3px solid #73AD21;
}
.image-normal {
border: 3px solid #FF0000;
}
</style>
</head>
<body>
<img src="image1.jpg" class="image-static"/>
<img src="image2.jpg" class="image-normal"/>
</body>
</html>
결과 :
position: relative;
position: relative; 로 설정된 엘리먼트는 기본 위치에서 상대적인 좌표에 위치한다. top, bottom, left, right 에 지정된 위치만금 원래의 위치로 부터 이동 시킨다. 다른 엘리먼트들의 위치에 영향을 주지 못하기 때문에 다른 엘리먼트와 겹칠 수 있다.
<html>
<head>
<style>
.image-relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
.image-normal {
border: 3px solid #FF0000;
}
</style>
</head>
<body>
<img src="image1.jpg" class="image-relative" />
<img src="image2.jpg" class="image-normal" />
</body>
</html>
결과 : 녹색 테두리의 image1이 왼쪽으로 부터 오른쪽으로 30px 이동하여 image2를 가리고 있다.
position: fixed;
position: fixed; 로 지정된 엘리먼트는 뷰포트에 상대적인 위치를 가지게 된다. 이게 무슨 말이냐면 페이지가 스크롤 되거나 다른 엘리먼트가 해당 위치에 이미 있더라도 항상 우리가 보는 윈도우의 고정된 위치에 있다는 뜻이다. fixed 엘리먼트는 엘리먼트 순서에 따른 위치를 가지지 못하기 때문에 다른 엘리먼트가 fixed 엘리먼트의 위치를 침범 할 수 있다.
<html>
<head>
<style>
.image-fixed {
position: fixed;
left: 0px;
bottom: 0px;
border: 3px solid #73AD21;
}
.image-normal {
border: 3px solid #FF0000;
}
</style>
</head>
<body>
<img src="image1.jpg" class="image-fixed"/>
<img src="image2.jpg" class="image-normal"/>
</body>
</html>
결과 : image1의 위치가 브라우져 화면의 왼쪽 아래에 위치한 것을 볼 수 있다. 그리고 아무런 position 프로퍼티를 지정하지 않은 image2는 fixed 값이 지정된 image1 대신 첫번째 엘리먼트의 위치로 이동 하였다.
만일 image1의 위치를 right: 0px; bottom: 0px; 로 지정한다면 다음과 같다. 브라우져를 스크롤을 하던, 리사이즈를 하던 image1의 위치는 항상 고정이다.
position: absolute;
position: absolute; 로 지정된 엘리먼트는 position 프로퍼티를 가지고 있는 가장 가까운 부모 또는 조상 엘리먼트의 상대적 위치에 따라 fixed 처럼 동작한다.
예를 들어 부모가 없거나, 부모 엘리먼트가 position 프로퍼티를 가지지 않은 경우, 자동으로 브라우저의 뷰포트가 position 프로퍼티를 가진 부모가 되어 fixed와 동일하게 동작한다.
<html>
<head>
<style>
div {
/* position:relative; */
width: 400px;
height: 200px;
border: 3px solid #FF0000;
}
.image-absolute {
position: absolute;
bottom: 0px;
right: 0px;
width: 120px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div>
<img src="image1.jpg" class="image-absolute"/>
<div>
</body>
</html>
결과 :
하지만 위 div에 postion 프로퍼티를 부여 하면 div 엘리먼트의 자식으로써 div 엘리먼트의 위치를 기준으로 fixed와 동일하게 동작한다.
<html>
<head>
<style>
div {
position:relative;
width: 400px;
height: 200px;
border: 3px solid #FF0000;
}
.image-absolute {
position: absolute;
bottom: 0px;
right: 0px;
width: 120px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div>
<img src="image1.jpg" class="image-absolute"/>
<div>
</body>
</html>
결과 :
position: sticky;
position: sticky는 유저의 스크롤 정도에 따라 위치가 결정된다. 예를 들어 아래 예와 같이 sticky div 엘리먼트의 top 프로퍼티가 0px로 설정되어 있다면 브라우저가 스크롤되지 않은 기본 상태인 경우엔 엘리먼트 순서대로 위치하지만 화면이 스크롤 되고 sticky div의 top이 화면을 벗어나 0을 넘어서는 순간 sticky div의 위치는 0으로 고정되어 화면 밖으로 나가지 않는다. 물론 -10px와 같이 지정하면 10px 만큼만 화면 밖으로 벗어나고 그 이상은 fixed 엘리먼트 처럼 동작한다.
NOTE 1 - Internet Explorer 브라우저는 sticky 포지션을 지원하지 않는다. 사파리의 경우는 -webkit- 프리픽스를 사용해야 한다.
NOTE 2 - sticky 포지션이 동작하기 위해서는 top, bottom, left, right 중 최소한 하나의 프로퍼티를 사용해야 한다.
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky; /* 사파리 브라우저 */
position: sticky;
top: 0px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h2>화면을 아래로 스크롤 해보세요</h2>
<div class="sticky">애국가</div>
<div style="padding-bottom:2000px">
<p>동해물과 백두산이 마르고 닳도록</p>
<p>하느님이 보우하사 우리나라만세</p>
<p>(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<p> </p>
<p>남산위에 저 소나무 철갑을 두른듯</p>
<p>바람서리 불변함은 우리기상 일세</p>
<p>(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<p> </p>
<p>가을하늘 공활한데 높고 구름없이</p>
<p>밝은달은 우리가슴 일편단심일세</p>
<p>(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<p> </p>
<p>이 기상과 이 맘으로 충성을 다하여</p>
<p>괴로우나 즐거우나 나라사랑하세</p>
<p>(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<p> </p>
</div>
</body>
</html>
결과 :
오버랩 엘리먼트
엘리먼트의 위치가 겹치는 경우 기본적으로 뒷 순서의 엘리먼트가 위로 온다. 하지만 z-index 프로퍼티를 지정함으로써 엘리먼트의 디스플레이 순서를 조절 할 수 있다. z-index는 숫자가 작아질수록 다른 엘리먼트들에 의해 가려지고, 커질수록 앞으로 나와 다른 엘리먼트를 가린다.
<html>
<head>
<style>
.image-fixed {
position: fixed;
left: 0px;
bottom: 0px;
border: 3px solid #73AD21;
z-index: -1;
}
.image-normal {
border: 3px solid #FF0000;
}
</style>
</head>
<body>
<img src="image1.jpg" class="image-fixed"/>
<img src="image2.jpg" class="image-normal"/>
</body>
</html>
결과 : 위의 fixed 예제에 z-index를 추가 했다. 이전의 결과는 녹색 테두리의 image1이 빨간색 테투리의 image2를 덮었지만 z-index를 이용해 image1을 뒤로 보냈기 때문에 이번에는 image2가 image1을 가린다.
내용이 마음에 드셨다면 공감(❤)과 짧은 댓글 달아 주시면 더욱 좋은 내용의 글로 보답 하겠습니다. 감사합니다.
