position: static

position의 디폴트 값이다. 원래 있어야 하는 위치에 배치된다.

position: relative

요소를 원래 위치를 기준으로 상대적으로 배치해준다

position: relative;
top: 40px; 
left: 40px;

position: absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정x. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정

position: absolute;
top: 40px; left: 40px;

즉 조상을 따라 올라가다가 요소중에 position이 static이 아닌 요소가 있다면 그 요소가 배치 기준이 되는 것이다. static이 아닌 요소가 없다면 최상위의 body가 기준이 되겠다.

하지만 이러면 복잡하니까.. 어떤 요소의 position 속성을 absolute로 설정하면, 부모 요소의 position 속성을 relative로 지정해주는 것이 관례이다.

position: absolute;
bottom: 40px;
right: 40px;

position: fixed

요소를 항상 고정된(fixed) 위치에 배치. 스크롤을 움직여도 고정된 위치에 있다. 배너같은거 구현할 때 사용하는 듯. position: absolute인 요소와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용 x

position: fixed;
top: 40px; left: 40px;

position : sticky

스크롤을 움직였을 때 요소가 설정된 위치에 닿으면 위치가 고정된다. 직접 해보는게 이해가 잘될 것이다.

position: sticky;
top: 20px;

z-index

말 그대로 z축의 위치를 정하는 것이다.

<style>
        .box1{
            width: 200px;
            height: 100px;
            position: absolute;
            z-index: 1;
        }

        .box2{
            width: 200px;
            height: 100px;
            position: absolute;
            z-index: 2; 
        }
</style>

z-index가 높을수록 더 위에 있는 것이다.

float

float은 쉽게 말하면 한 요소가 보통 흐름으로부터 빠져서 띄워지는 것이다. block 요소에서만 사용할 수 있다.

/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

문제점

float상태는 말 그대로 요소가 둥둥 떠있는 상태라서, 앞에 요소가 떠있으면 그 다음에 있는 요소가 그 자리가 비었다고 생각하고 그 자리로 올라오게 된다. (아래 사진 참고)

해결법

float을 clear해주는데는 다음과 같은 방법이 있다.

1. float 속성을 가진 요소의 부모 요소에 overflow: hidden 또는 overflow: auto를 적용 (레이아웃에 영향 줄 수 있음)

.parent {
    overflow: hidden; /* float된 자식 요소를 감쌈 */
}

2. float 속성을 적용한 요소의 다음 요소에 clear 속성 적용

left : 왼쪽으로 붙는 float 정렬을 취소 한다.
right: 오른쪽으로 붙는 float 정렬을 취소 한다.
both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다.

div#a {
	float: right;
}
p#text {
	clear: right;
}

div#a {
    float: left;
}
div#b {
    float: right;
}
p#text {
    clear: both;
}

3. 가상 요소 ::after 사용 (보편적, 권장)

.parent::after {
	content: '';
	display: block;
	clear: both;
}

출처
https://developer.mozilla.org/ko/docs/Web/CSS/position
https://developer.mozilla.org/ko/docs/Web/CSS/float
https://ddorang-d.tistory.com/12