[TIL] position

min00young·2020년 10월 21일
0

목표

CSS의 position의 개념을 정리합니다.

position 프로퍼티에 대해서

position 프로퍼티는 css에서 엘리먼트의 위치를 결정하는 개념입니다. position의 경우, 4가지의 값을 가질수있습니다.

  1. static
  2. relative
  3. absolute
  4. fixed

relative에 대해서

relative의 경우, relative 설정이후,
top, right, bottom, left 프로퍼티의 값에 따라서 위치를 정할수 있습니다.
아래 코드의 경우, position으로 relative값을 넣고, top과 left 프로퍼티값을 넣어줌으로서 위치가 이동되는 효과를 볼수있습니다.

# index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <span class="relative">1</span>
    <span class="relative top40">relative top-20 left+20</span>
 </body>
</html>
#index.css

.relative {
    border: 1px solid red;
    position: relative;
  }
.top40 {
    border: 1px solid red;
    top: 40px;
    left: 20px;
  }

absolute에 대해서

absolute값의 경우는, 이름 그대로 절대적인 위치에 배치가 가능하며, 절대적인 위치의 기준은 부모태그입니다.
아래코드의 경우, position값이 absolute인것이 부모태그중에서 relative인것의 위치를 기준으로 배치되는것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

fixed에 대해서

fixed의 경우, 마우스 스크롤을 움직이더라도 웹브라우저에서 보여지는 위치에 고정된것처럼 같은 위치에서 엘리먼트가 보여지게 됩니다.
아래코드의 경우, position이 fixed값을 가지고 있는경우 해당되는 위치의 엘리먼트가 스크롤이 이동되도 동일한 위치에 있는것을 확인할수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>
profile
개발공부를 하면서 배우고 경험하고 앞으로 알아가야할것들에 대해서 정리하고 있습니다 🙂

0개의 댓글