참고
- https://opentutorials.org/course/2418/13414
- https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1
- position
: eliment(tag)가 화면의 어디에 위치하는지를 알려주는 속성
- offset
:부모 박스의 좌측 상단으로부터 자식까지의 x, y 거리
- bottom vs top : 두 값이 동시에 있을 때 순서 상관없이 top 값만 씀.
- left vs right : 두 값이 동시에 있을 때 순서 상관없이 left 값만 씀.
1. position: static
position의 기본값, offset 값은 설정할 수 없으며
다른 태그와 상호작용하여 원래 위치해야 하는 곳에 있게 됨.
position설정한 걸 보다보면 알겠지만
html은 모든 것을 감싸줄 것 같은데
position: static;속성값을 벗어나게 된 요소에 대해서는 더 이상 감싸주지 않고
원래 요소들을 감쌌던 범위 그대로인 채로 네 알아서 살라고 하는 것 같다.
2. Position: relative;
원래 있던 위치를 기준으로 해서
offset 적용한 자리로 요소를 이동하는 속성값.
<body>
<div id="other_parent">
other parent
</div>
<div id="parent">
parent
<div id="me">
me
</div>
</div>
</body><style>
html {
border: 3px solid gray;
}
div {
border: 5px solid hotpink;
margin: 10px;
}
#me {
position: relative;
right: 100px;
left: 100px;
top: 100px;
bottom: 100px;
}
</style>
- left, right 값이 함께 있으니까
두 값을 상쇄해서 0px;이 되는 것이 아니라
우선순위인 left값을 적용하고 right값은 무시한다.
- 자식 요소의 offset값이 (postion: relative; 이면서 top=0, left=0)이면
부모요소 바로 아래의 원래 위치에 자리를 잡는다
- 부모요소가 차지하는 가로폭만큼 자식태그도 자리를 차지한다.
- 부모요소의 영역은 처음 자식요소까지의 영역만큼은 그대로 가지고 있지만
자식 요소가 그 자리를 더 벗어난다고 해서 그만큼 영역이 넓어지진 않는다.
(마치.. 부모와의 연이 끊어지진 않았지만 독립을 하러 떠난 자식같다..)
3. Position: absolute;
absolute 속성을 띄는 자식 요소는
relative 속성인 상위 요소 자리를 기준으로 offset을 적용한다.
relative인 상위 요소가 없으면 가장 상위 태그(html eliment)의 한 점을 기준으로
offset 적용을 한다.
<body>
<div id="other_parent">
other parent
</div>
<div id="parent">
parent
<div id="me">
me
</div>
</div>
</body><style>
html {
border: 3px solid gray;
}
#other_parent, #parent {
border: 5px solid hotpink;
margin: 10px;
}
#me {
position: absolute;
background-color: red;
color: white;
left: 0;
top: 0;
}
</style>
- 자식요소의 offset을 설정하지 않으면 부모태그의 바로 아래에 위치한다.
(postion: relative;하고 offset 설정 안할 때와 같다)
- absolute로 자식요소에 offset을 설정하면 부모-자식요소 간 링크가 끊겨
부모 요소는 이전에 자식이었던 요소를 더 이상 자신의 영역에 집어 넣지 않는다.
- 부모 요소와 상관 없어진 자식 요소는 block요소의 특징인 가로 길이 100%가 풀리고
자기 자신의 content 크기까지만 영역(background-color참조)으로 가진다.
- 부모요소의 속성이 relative이고 자식 요소의 offset값이 (postion: absolute; 이면서 top=0, left=0)이면
자식 요소는 가장 상위태그인 html가 아닌 부모요소의 위치에 놓이게 된다.
- 만일 부모 요소의 속성이 static이고 부모 요소보다 상위인 요소가 relative,
그리고 자식 요소의 offset값이(postion: absolute; 이면서 top=0, left=0)이면
자식 요소는 몇 단계 위까지의 상위 요소이건 간에 relative인 상위 요소 자리까지 올라가 그 자리에 놓인다.
(마치.. 부모와의 연을 끊고 독립을 하러 떠난 자식같다..)
4. Position: fixed;
fixed를 속성으로 갖는 요소는 스크롤을 움직여도 offset 설정한 그 자리 위에 그대로 떠있다.
<body>
<div id="other_parent">
other parent
</div>
<div id="parent">
parent
<div id="me">
me
</div>
</div>
<div id="other_person">
just person
</div>
</body><style>
html {
border: 3px solid gray;
}
#other_parent, #parent {
border: 5px solid hotpink;
margin: 10px;
}
#me {
position: fixed;
background-color: red;
color: white;
left: 0;
top: 0;
}
#other_person {
height: 1000px;
background-color: pink;
}
</style>
- fixed된 요소는 block요소의 특징인 가로 길이 100%가 풀리고콘텐츠 크기만큼만 영역으로 갖는다.
- 부모 요소는 자식이었던 요소를 자신의 영역 안에 포함하지 않는다.
- 자식요소의 offset값을 설정하지 않으면 부모요소의 바로 아래 위치에 놓이게 된다. (absolute와 동일)
만일 형제 요소가 있다면 한 자리에 겹쳐 있는 것이 아니라
코드에 쓰인 순서대로 display 속성에 맞게 배치된다.
- offset값을 설정하면 absolute의 규칙을 따라 자리가 결정된다.
다만 부모요소를 relative로 설정해도 그 아래 자리에 놓이지 않고
가장 상위 태그인 html를 기준으로 자리를 잡는다.
'CSS' 카테고리의 다른 글
| [CSS] BOX모델 (0) | 2020.08.12 |
|---|---|
| [CSS] 간단한 네비게이션바 만들기 (1) float, (2) height를 이용하기 (0) | 2020.08.11 |
| [CSS] CSS 기초 (0) | 2020.08.10 |
| [CSS] Pseudo Selectors (가상 선택자) - 가상 클래스 (pseudo class), 가상 요소 (pseudo element) (0) | 2020.05.20 |
| [CSS] Box Model의 축약 표현 (0) | 2020.05.18 |