position(static , relative , absolute, fixed)

Jihyun-Jeon·2022년 2월 21일

HTML,CSS

목록 보기

6/34

🔶static(기본값)

태그가 적힌 순서대로, position 지정하지 않았을 때랑 같음.
top,right,bottom,left 지정해도 안먹힘

🔶relative

요소가 처음 위치한 지점을 기준으로, top,bottom,left,right 이동함.
그 요소가 옮겨지면, 그 요소가 있던 자리는 뻥 뚤리게 됨.

    .box2{
 				background-color: green;
 				position: relative;
 				left: 100px;
 				top: 100px
 			}

🔶absolute

1

기본 기준이 body 기준임. body(0,0)를 기준으로 top,bottom,left,right 이동함
그 요소가 옮겨지면, 아래에 있는 요소가 해당 자리를 차지하게 됨.

2

가장 가까운 부모요소에 relative가 지정되 있으면, 그 부모요소를 기준으로 움직이게 됨.

   div{
		width: 600px;
		height: 600px;
		margin: 0 auto;
		border: 1px solid black;
		position: relative;
	    }

   .box2{
 	       background-color: green;
 			position: absolute;
 			top: 0px;
 			left: 10px;
 			}

🔶fixed

원래 위치와 상관없이 위치를 지정할 수 있다. "브라우저 화면"을 기준으로 위치가 결정된다.
브라우저 기준으로 되서 fixed 적용된 요소가 레이아웃 층이 뜬 것 처럼 됨.
따라서 "아래 요소들이 위로 올라옴"
(아래에 있는 요소가 해당 자리를 차지하게 됨.)
상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 "고정된 위치"를 설정 할 수 있다.
(스크롤 내려도 고정된 위치에 딱 있음)

 #blue { position: fixed;
        top: 20px;
        left: 20px;  }

🔶 position의 레이아웃 기능

position : sticky, absolute, fixed 사용시 레이아웃 층이 올라오게 됨.
※position과 float의 차이
:float 는 겹쳐서 사용 못함. position은 겹쳐서 사용 가능함(레이아웃 층이 앞으로 됨)

< 예제 >

1. 기본 상태

<style>
  header {
    width: 100%;
    height: 103px;
    background-color: #ccc;  }
</style>

<body>
    <header><header>
    <img src="./imgs/banner_01.jpg" alt="mainbanner" />
</body>

2.header에 position:absolute 지정 ← 레이아웃 층이 생김

header {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 100%;
  height: 103px;
  background-color: #ccc;
}

Jihyun-Jeon

~23.05

이전 포스트

flexbox

다음 포스트

position(static , relative , absolute, fixed)

HTML,CSS

🔶static(기본값)

🔶relative

🔶absolute

1

2

🔶fixed

🔶 position의 레이아웃 기능

< 예제 >

1. 기본 상태

2.header에 position:absolute 지정 ← 레이아웃 층이 생김

flexbox

선택자 - 의사클래스( :nth-child(n) ), 요소 선택자( :nth-of-type(n) )

0개의 댓글