[css] position

Chanho Yoon·2021년 2월 16일

absolute fixed position relative sticky

CSS-Layout

목록 보기

1/3

위코드 2일차 layout에 대해 공부하면서 position 속성에 대해서 공부한 것들을 정리합니다.

1. position

1-1) position 이란

css position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.

1-2) position 속성

static
relative(상대)
absolute(절대)
fixed(고정)
sticky

1-2-1) static

일반적인 문서 흐름에 따라 배치, top,right,bottom,left,z-index 속성이 아무런 영향도 주지 않습니다.
default 값

1-2-2) relative(상대)

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>position</title>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="box1 box">
	<div class="box2 box">
		<div class="box3 box"></div>
	</div>
</div>
<div>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam quisquam suscipit tempora.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam quisquam suscipit tempora.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam quisquam suscipit tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam quisquam suscipit tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam quisquam suscipit tempora.
</div>
</body>
</html>

style.css

.box {
    width: 300px;
    border: 2px solid black;
    height: 300px;
}
.box1 {
    position: relative;
    background-color: red;
    opacity: 0.8;
}
.box2 {
    position: relative;
    background-color: yellow;
    opacity: 0.8;
    top: 100px;
    left: 100px;
}
.box3 {
    position: relative;
    background-color: green;
    opacity: 0.8;
    top:100px;
    left:100px;
}

해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치(top,right,bottom,left)를 지정할 수 있습니다.
기본적으로 relative 속성은 페이지 레이아웃에 공간을 배정합니다.

주로 absolute를 사용할 때 영역을 잡아주는 역할을 합니다.
즉 부모가relative이고absolute를 자식이라고 했을때 자식은 부모를 기준으로 위치를 잡게 됩니다.

1-2-3) absolute(절대)

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>position</title>
   <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="box1 box">relative
   <div class="box2 box">relative
      <div class="box3 box">absolute</div>
   </div>
</div>
<div class="box4 box">relative</div>
<div>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam
   quisquam suscipit tempora.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam
   quisquam suscipit tempora.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit voluptas. Animi facere ipsam
   quisquam suscipit tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum. Alias delectus illo neque sit
   voluptas. Animi facere ipsam quisquam suscipit tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorem exercitationem iure iusto libero nulla quod tempore, voluptatum.
   Alias delectus illo neque sit voluptas. Animi facere ipsam quisquam suscipit tempora.
</div>
</body>
</html>

style.css

* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 3px;
}
.box {
    border      : 2px solid black;
    font-size   : 70px;
    font-weight : bold;
}
.box1 {
    position         : relative;
    background-color : red;
    opacity          : 0.8;
    width            : 300px;
    height           : 300px;
}
.box2 {
    position         : relative;
    background-color : yellow;
    opacity          : 0.8;
    width            : 200px;
    height           : 200px;
    left             : 150px;
    top              : 0px;
}
.box3 {
    position         : absolute;
    background-color : green;
    opacity          : 0.8;
    top              : 0px;
    left             : 0px;
    width            : 350px;
    height           : 400px;
}
.box4 {
	position: relative;
}

absolute는 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
보시면 .box3에서 top:0px, left:0px 를 줬을때 바로위의 부모인 .box2를 기준으로 정렬되는 것을 확인하실 수 있습니다.

또한 relative는 페이지 공간에 레이아웃에 공간을 배정하지만 absolute는 공간이 배정되지 않는 것을 확인할 수 있습니다!

1-2-4) fixed(고정)

* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 3px;
}
.box {
    border      : 2px solid black;
    font-size   : 70px;
    font-weight : bold;
}
.box1 {
    position         : relative;
    background-color : red;
    opacity          : 0.8;
    width            : 300px;
    height           : 300px;
}
.box2 {
    position         : relative;
    background-color : yellow;
    opacity          : 0.8;
    width            : 200px;
    height           : 200px;
    left             : 150px;
    top              : 0px;
}
.box3 {
    position         : fixed;
    background-color : green;
    opacity          : 0.8;
    width            : 350px;
    height           : 400px;
}
.box4 {
    position: relative;
}

fixed는 absolute와 마찬가지로 문서 흐름에서 제거, 페이지 레이아웃에 공간도 배정하지 않습니다. 하지만 상위(부모) 요소에 영향을 받지 않기 때문에 화면이 바뀌거나 스크롤을 해도 고정된 위치를 설정할 수 있습니다.
즉 브라우저 화면의 상대 위치를 기준으로 위치가 결정됩니다.

1-2-5) sticky

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>position</title>
   <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main-box">
   <div class="relative box">relative</div>
   <div class="sticky box">sticky</div>
   <div class="fixed box">fixed</div>
</div>
<div class="box4 box">relative</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

style.css

* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 3px;
}
.main-box {
    width       : 100%;
    height      : 200px;
    display     : flex;
    align-items : center;
    border      : 5px solid black;
}
.box {
    width        : 150px;
    text-align   : center;
    font-size    : 30px;
    font-weight  : bold;
    border       : 1px solid black;
    margin-right : 50px;
}
.relative {
    position : relative;
}
.sticky {
    position : sticky;
    top      : 2px;
}
.fixed {
    position : fixed;
    top      : 85px;
    left     : 400px;
}

sticky는 일반적인 문서 흐름에 따라 배치하지만 스크롤 위치가 임계점에 이르면 해당하는 박스 이내에서 고정이 되는 효과를 가집니다.
즉 자신의 바로 위 상위(부모)요소 안에서만 적용됩니다.

👺sticky 주의사항!!👺
overflow:auto, overflow:hidden,overflow:scroll 가 적용된 부모가 있으면 속성 적용이 안됩니다!

참고
레진기술
MDN

Chanho Yoon

다음 포스트

[css] position

CSS-Layout

1. position

1-1) position 이란

1-2) position 속성

1-2-1) static

1-2-2) relative(상대)

1-2-3) absolute(절대)

1-2-4) fixed(고정)

1-2-5) sticky

[css] display 속성

0개의 댓글