박스가 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓이고 있다.
원래 자신이 위치해야 할 자리에 정적으로 들어가 있는 상태이다.
포지션이 static 이라는 말이다.
모든 태그들은 기본적으로(default) position : static 상태이다.
요소, 태그들 하나하나를 html에서는 dom 혹은 element라고 한다.
전체 바디는 document, 바디안의 모든 것을 object라고 한다.
dom(document object model) : 문서 객체모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공
포지션은 css로 위치제어가 가능하다.
하지만 static은 정적플로우로 위치 이동이 불가능하다.
위치 이동을 하기 위해서는 relative로 변경해야 한다.
(위치를 상대적으로 이동)
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
border: 1px solid black;
padding: 5px;
}
.box1 {
position: static;
width: 300px;
height: 300px;
}
.box2 {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div>첫번째 박스</div>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
relative : 원래 자기가 있어야 할 static 한 위치에서 상대적으로 움직이는 것
<body>
<div>첫번째 박스</div>
aaaaaaaaaaaaaaaaaaaaaaaaa
<div class="box1">
<div class="box2">
</div>
</div>
</body>
위치를 지정해주면 원래의 위치 그 자리에서 상대적으로 움직이기 시작하고
부모 태그의 위치를 따라 움직인다.
위치를 움직일 때는 주로 flex를 사용하고 relative는 잘 쓰이지 않는다.
애매한 위치로 이동할 때 relative를 사용한다.
웹브라우저에는 기본적인 도화지 1장이 있는 상태이고 도화지 위에 그림을 그린다.
1번 도화지에 이미지를 넣으면 static 한 포지션이라 이미지 위에 다른 글자나 버튼을 삽입할 수 없다.
다른 도화지로 넘어가기 위해서는 하이퍼링크가 필요했다.
static이라 다른 요소를 더 붙일 수는 없지만 도화지를 덧댈 수는 있다.
도화지를 덧대는 포지션이 absolute이다.
하지만 이전에 배웠던 백그라운드 이미지를 사용하면
포지션은 전혀 생각할 필요가 없다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 5px;
display: inline-block;
}
.box2 {
position: absolute;
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
</body>
</html>
box2가 absolute포지션이면 도화지를 하나 더 만들어서 생성된다.
이때 box3는 원래 도화지에 있기 때문에 box2와 겹쳐버리게 된다.
box2는 도화지가 하나 더 생긴 것이니까 body에 관계하고, box1, box3과는 영역이 다르다.
도화지는 달리했는데 왜 위치가 box1 뒤에 생겼을까?
이것은 디폴트 값이다.
box2를 감싸는 부모 박스를 하나 만들고
box2를 absolute해도 부모 박스에 관계없이(관계를 잃어버림) 바디에 관계한다.
box2는 새로운 도화지에 생긴 거지만 부모 박스는 여전히 원래 도화지에 있기 때문이다.
관계를 잃어버리지 않기 위해서는 absolute의 부모가 relative면 부모를 따라서
부모 기준으로 움직일 수 있다.
box1이 box2에 가려져 보이지 않을 때
box1이 위로 올라오게 하려면 z-index를 사용해준다.
이때 box1이 static 상태라면 index 설정을 해줘도 아무런 반응이 일어나지 않는다!
z-index 숫자가 높을수록 제일 위에 보이고
기본 도화지가 가장 아래에 있다.
모든 돔에는 눈에 보인다는 의미의 visibility라는 속성이 있다.
visibility: none; 보임
visibility: hidden; 안보임
absolute의 돔들은 기본 도화지에 영향 미치지 않는다.
absolute가 아닌 relative라면 다 같은 도화지이기 때문에
겹치는 요소들은 다 밀려나게 될 것이다.
absolute를 사용하면 눈에 안보일 뿐 실제로 존재는 하고 다른 박스들에게 영향을 미치지 않을 수 있다.
position: fixed;
바디(브라우저)에 고정되어 움직임
스크롤에 따라 움직이지 않고 항상 브라우저 그 위치에 있음
잘 쓸 일은 없으니 알아만 두자
ex. 배너
위치를 이동할 때는 flex, relative, absolute 아무거나 사용해도 상관없지만
화면을 겹쳐서 사용할 땐 absolute를 사용한다.
relative와 absolute를 가장 많이 사용한다.
flex -> 위치 이동
relative -> 위치 이동(애매한 위치)
absolute-> 위치이동 / 겹치고 싶을 때 사용!
[출처]
https://cafe.naver.com/metacoding
메타코딩 : 네이버 카페
코린이들의 궁금증
cafe.naver.com
메타 코딩 유튜브
https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9
메타코딩
문의사항 : getinthere@naver.com 인스타그램 : https://www.instagram.com/meta4pm 깃헙 : https://github.com/codingspecialist 유료강좌 : https://www.easyupclass.com
www.youtube.com
