css position & offset / static, relative, absolute, fixed / css 공부할 때 보면 좋은 사이트

📌Language/HTML & CSS

css position & offset / static, relative, absolute, fixed / css 공부할 때 보면 좋은 사이트

hellohailie 2022. 4. 19. 22:56

position 속성

요소의 위치를 정하는 방법을 지정하는 속성입니다.

기본 값 : static

position: static | absolute | fixed | relative | sticky | initial | inherit;

< 속성 값 >

static	Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)
absolute	부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어나고, display를 block으로 갖는다. 절대위치 0,0 이면 padding에 까지 붙는다.
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다. 부모의 위치에 영향을 받지 않는다. 고정위치
relative	자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다. 부모의 position 속성에 영향을 받지 않는다. Normal -flow의 흐름에 따른다. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다. 상대위치 (자기 자신을 기준으로해서 상대적으로 움직인다. ) top: -50px 위로 움직인다. (bottom: +50px 이거랑 결론적으로 위치는 같다.) left:-50px 왼쪽으로 움직인다. (right: +50px 이거랑 결론적으로 위치는 같다.)

Normal-flow 란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.

sticky는 실무상 잘 쓰지 않는다. (좋은 기능이지만 지원률이 좋지 않다. // can i use 사이트 참고)

offset(top/left/bottom/right)

top|bottom|left|right: auto|length|initial|inherit;

top: 50%;
left: 10px;
bottom: -10px;
right: auto;

offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.

**브라우저에서는 속성값의 조합을 고려하면서까지 오류를 발견해주지 않는다.

그래서 default 값일 때 top, right를 선언해놓고 변화가 없을때는 position을 제대로 움직일 수 있는 값으로 선언을 했는지 꼭 발견할 줄 알아야 한다.

부모가 static이 아닌 relative, absolute, fixed 일 때 그때 그 offset 값이 작동한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position</title>
  <style>
    .sibling {
      padding: 5px;
      background-color: #eee;
      text-align: center;
    }

    .parent {
      border: 1px dashed #aaa;
      padding: 10px;
    }

    .child,
    .child_offset {
      width: 60px;
      height: 60px;
      padding: 20px;
      background-color: #dc3636;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border: 1px solid #333;
    }

    .child_offset {
      background-color: #3677dc;
    }

    .static {
      position: static;
    }

    .relative {
      position: relative;
    }

    .static {
      position: static;
    }

    .absolute {
      position: absolute;
    }

    .fixed {
      position: fixed;
    }
  </style>
</head>
<body>
  <h1>position (Offset 미지정)</h1>
  <h2>static (기본)</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child static">static</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>relative</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child relative">relative</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>absolute</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <!-- absolute, fixed는 inline요소일때 display:block으로 변경시킴. inline-block 값을 임의 지정했을 때는 그 값을 유지함. -->
    <span class="child absolute">absolute</span>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>fixed</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <!-- 현재 fixed는 offset값이 없어 뷰포트 밖으로 밀려나오면서 화면 아래로 사라짐 -->
    <div class="child fixed">fixed</div>
    <div class="sibling">Sibling 2</div>
  </div>


  <h1>position (Offset 지정)</h1>
  <h2>static - </h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset static" style="top: 40px; right: 40px;">static <br>top: 40, left: 40</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>relative</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset relative" style="top: 40px; left: 40px;">relative <br>top: 40, left: 40</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>absolute - parent relative</h2>
  <div class="parent relative">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset absolute" style="top: 40px; left: 80px;">absolute<br>top: 40, left: 80</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>fixed</h2>
  <!-- 부모가 fixed여도 별개로 위치함 -->
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset fixed" style="top:100px;left:80%;">fixed<br>top:100, left:80%</div>
    <div class="sibling">Sibling 2</div>
  </div>
</body>
</html>

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

👇css 참고 사이트👇

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

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

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

HTML/CSS 유효성 검사 사이트 (0)	2022.04.19
z-index, 쌓임 순서, 툴팁 박스 (tool tip) (0)	2022.04.19
css display float과 clear (0)	2022.04.19
css visibility 속성 (0)	2022.04.19
display 속성 (0)	2022.04.19

현재글css position & offset / static, relative, absolute, fixed / css 공부할 때 보면 좋은 사이트

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Today Hailie Learned

css position & offset / static, relative, absolute, fixed / css 공부할 때 보면 좋은 사이트

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

'📌Language/HTML & CSS'의 다른글

티스토리툴바

css position & offset / static, relative, absolute, fixed / css 공부할 때 보면 좋은 사이트

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

'📌Language/HTML & CSS'의 다른글

관련글

티스토리툴바