[css] position 개념정리 (absolute, relative, fixed..)

pisition은 float와 달리 박스 모델을 원하는 장소에 배치하는 것을 목적으로 한다

 

다른 박스 모델 위에 배치할 수도 있고 안움직이게 고정할수잇다

 

함 살펴보자

 

---

속성: absolute fixed relative static inherit

 

부속 속성: top left bottom right z-index

 

부속 속성은 속성이잇어야 작동하는 애들이다

 

속성	설명
absolute	처음 위치한 박스나 다른 조상요소 기준으로 절대위치
fixed	다른 조상 요소 기준으로 위치고정 /top, left, bottom, right 적용하면 절대 위치 배치되서 완전고정된다
relative	기본위치부터 top,left,bottom,right에의해 위치 결정 ↑애들이 없으면 static과 같은 속성이 된다
static	positon 적용하지 않으면 박스 모델은 이 값을 가진다 default인듯
inherit	부모 요소로부터 위치 속성 물려받기

 

 

 

---

 

 

relative

 

.top{
    position: relative;
    top:5px;
    z-index: 1;
}

.right{
    position: relative;
    right:5px;
}


.bottom{
    position: relative;
    bottom:5px;
}

 

 

위치 변경을 해주고 싶을때 relative를 사용한다 top bottom left right 그 반대방향으로 이동한다 (-도 사용가능하다)

 

left위에 top이 있는걸 볼 수 있는데 top에 z-index를 1로 줬다

 

숫자가 높을 수록 위로 겹쳐졌을 때 위로 올라간다

 

 

 

---

 

 

absolute

 

relative는 static상태 기준으로 픽셀만큼 움직였다면 

 

static속성 안가지고 있는(속성 뭔가 가지고있는) 부모 기준으로 움직인다

 

 

다음은 box1이 있고 parent안에는 box2가 잇다

.box1{
    position: absolute;
    right:0;
}

.box2{
    position: absolute;
    right: 0;
}

.parent{
    position: relative;
}

box1은 상위에 속성 안가진놈이 없어서 body기준 이고

 

box2는 상위에 parent라는 relative가진 애가 있다 그래서 인마 기준으로 움직인다

 

 

 

 

 

---

 

fixed

 

보통 홈페이지에 상단 네비게이션바같은 애들은 화면을 내려도 가만히 있는다

 

얘가 fixed다

 

.box1{
    position: fixed;
     top: 0;
}

 

스크롤 아무리 내려도 가만히 있다

 

신기하다

 

 

---

 

맨날 헷갈려서

 

css 뚝딱뚝딱 야매로 했던 기억이 있다

 

이제 개념이 정리 됐다

 

 

 

나이스

 

 

 

 

 

참조: www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1