[css] position

FE/HTML,CSS

[css] position

mandelina 2022. 4. 11. 16:24

🚀position ?

웹페이지에서 만들었던 html태그 , id , class 박스 등의 위치를 지정해주는 속성이다.

1) absolute / static / absolute

- static : 기본값 , html태그 순으로 위치가 지정된다.

(굳이 쓸 필요는 없지만 , 부모 객체에서 다른 position 속성값이 주어졌을때 무시하기위해 사용함.)

box1 , box2 , box3를 static으로 놓았을 경우

-absolute : 기준점이 html위치에 있다.

( 왼쪽 제일 상단을 기준으로 하며 움직인다.)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>relative-absolute</title>
  <style>

  .box1{
    position:relative;
    top:40px;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:absolute;
    top: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box3{
    position: absolute;
	top: 30px;
    left: 30px;
    background-color: blue;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box3">box3</div>
  <div class="box1">box1
    <div class="box2">
      box2
    </div>

  </div>
</body>
</html>

box2는 absolute로 주어졌기때문에 다른 박스를 무시하고 젤 위쪽 상단을 기준으로 top : 40px; 만큼 간 것을 알 수있고, box3 역시 왼쪽 상단을 기준으로 top:30px, left:30px 만큼 간 것을 확인 할 수 있다.

- relative : 원래 자신이 있어야 할 위치로 부터 상대적으로 위치

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>relative</title>
  <style>
  .box1{
    position: static;
    background-color: green;
    color: white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:relative;
    left: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

box2는 원래 box1밑에 자리 (원래있어야 할 위치)로 부터 left:40px 만큼 이동한 것을 볼 수있다.

정리

static : position을 주지 않았을때 디폴트 값

relative : nomal flow를 따를 때 원래 있어야하는 위치에서 상대적으로 얼마나 움직이느냐라는 기준

absolute : 자기 부모들 중 static이 아닌 태그의 위치 기준

이 글을 포스팅한 이유는 아래 코드를 왜 쓰는가에 대한 궁금증 때문이였다.

  position: absolute;
  top: 0;
  width: 100%;

로고같이 맨 위에 위치되어야할 태그에 position을 absolute로 두고 top:0; 를 주면

이 값은 html 제일 왼쪽 상단에 위치하게 된다.

2) fixed / sticky

- fixed

스크롤을 올리거나 내릴때 특정 박스가 고정되어 움직이지 않게 하는 속성

absolute가 position속성을 가진 가장 가까운 부모를 기준으로 위치를 정함.

ex) 네이버 검색창 , 다크모드버튼

See the Pen Untitled by mandelina (@mandelina) on CodePen.

-sticky

문서의 흐름에 따라 배치되며 자신의 상위요소에 붙게 된다.

ex) 웹 광고배너

See the Pen Untitled by mandelina (@mandelina) on CodePen.

(0.25로 보셔야 알 수 있습니다.)

차이점은 무엇일까 ?

- fixed는 문장의 흐름과 상관없이 항상 자기자리 에 고정이 되어있다면,

- sticky는 문서의 흐름에 따라 배치 되며 상위요소, 하위요소에 가면 딱 달라붙는다.

🌈그밖에

- z-index의 경우 보통 10,100,1000 단위 등으로 크게크게 쓴다. (회사 컨벤션에 따라 다르다.)

- 미리미리 이력서를 쓰자!

🔥 회고

시작한지 별로 안된것 같은데 벌써 3주차로 넘어가고 있다.

css를 들어오며 확실히 이해하지않으면 헷갈릴만한 개념들이 나온다. (ir기법이라던지 , 선택자 심화부분이라던지..)

일단 급한 과제들을 마무리 하고, ir기법과 가상선택자를 추가적으로 공부해야겠다.

또한 점점 공부할 양이 많아지는데 나태해지지 말고 이 페이스 그대로 이어가자!

월요일 파이팅 👊

'FE > HTML,CSS' 카테고리의 다른 글

[css] Flex란? (0)	2022.04.13
[css] float (0)	2022.04.12
[css] 중앙정렬 시 사용되는 코드 모음 (0)	2022.04.07
overflow : hidden vs display : none 의 차이점은? (0)	2022.04.07
[css] img하단요소에 생기는 빈공간은 무엇일까 ? (2)	2022.04.07

현재글[css] position

Hello_coding

자바스크립트, react, JS, 리덕스툴킷, 코딩테스트, http, 리덕스, 프론트엔드, TypeScript, useEffect, 프론트엔드스쿨2기, HTML, 멋쟁이사자처럼, spa, CSS, 리액트, TpyeScript, node.js, 프로그래머스, 프론트엔드스쿨,

Today :
Yesterday :

Hello_coding

[css] position

🚀position ?

1) absolute / static / absolute

- static : 기본값 , html태그 순으로 위치가 지정된다.

-absolute : 기준점이 html위치에 있다.

- relative : 원래 자신이 있어야 할 위치로 부터 상대적으로 위치

정리

2) fixed / sticky

- fixed

-sticky

차이점은 무엇일까 ?

- fixed는 문장의 흐름과 상관없이 항상 자기자리 에 고정이 되어있다면,

- sticky는 문서의 흐름에 따라 배치 되며 상위요소, 하위요소에 가면 딱 달라붙는다.

🌈그밖에

🔥 회고

'FE > HTML,CSS' 카테고리의 다른 글

'FE/HTML,CSS'의 다른글

티스토리툴바

« 2024/09 »
일	월	화	수	목	금	토
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

[css] position

🚀position ?

1) absolute / static / absolute

- static : 기본값 , html태그 순으로 위치가 지정된다.

-absolute : 기준점이 html위치에 있다.

- relative : 원래 자신이 있어야 할 위치로 부터 상대적으로 위치

정리

2) fixed / sticky

- fixed

-sticky

차이점은 무엇일까 ?

- fixed는 문장의 흐름과 상관없이 항상 자기자리 에 고정이 되어있다면,

- sticky는 문서의 흐름에 따라 배치 되며 상위요소, 하위요소에 가면 딱 달라붙는다.

🌈그밖에

🔥 회고

'FE > HTML,CSS' 카테고리의 다른 글

'FE/HTML,CSS'의 다른글

관련글

티스토리툴바