[HTML/CSS] 요소들의 좌표 설정

까꿍·2023년 6월 8일

CSS html

HTMLCSS

목록 보기

8/8

📍 position

요소들의 좌표를 설정해줄 수 있다.
➲ 좌표를 이용해 요소들을 배치할 수 있다.

top, bottom, left, right을 이용해 상하좌우 위치를 변경할 수 있다.

.box {
	top: 20px;
    left: 10%;

position 은 좌표속성의 기준점을 정해주는 속성이다.

1. position 속성의 특징

이동이 가능하다.
position을 사용하면 요소가 공중에 뜨게 된다.

2. position 속성의 종류

position: static; : 기준점을 설정하지 않아 좌표 속성을 사용하지 않는다.
position: relative; : 해당 요소의 원래 위치를 기준점으로 사용한다.
position: absolute; : 해당 요소의 부모 태그를 기준점으로 사용한다.
✅ 부모 태그가 기준점이 되기 위해 해당 요소의 부모 태그에 position: relative; 를 선언해주어야 한다.
position: fixed; : 현재 화면을 기준점으로 사용한다.

🧐 position: absolute; 가 있는 요소의 가운데 정렬

.box{
	position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 값;
    /* width는 값과 상관없이 존재하기만 하면 된다. */

📍 z-index

z-index: 정수;

position의 성질 중에는 postion이 적용된 요소가 공중에 붕 뜨게 되는 성질이 있다.
만약, 여러 요소에 position 속성을 사용한다면 공중에 붕 뜨게 되는 요소가 많아지는데 만약 이 요소들이 겹치는 부분이 생긴다면 z-index 를 사용해 앞뒤 순서를 정해준다.

더 높은 정수가 앞에 위치하게 된다.

✍🏻 example

.box1 {
    background-color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 150px;
    z-index: 5;
 }
 
 .box2{
 	background-color: black;
    position: relative;
    margin: auto;
    width: 100px;
    top: -200px;
    z-index: 10;
 }