웹사이트를 제작하다 스크롤을 내려도 특정 박스를 고정시켜야 할 일이 있다. 이때 사용하는 것이 fixed이다.
fixed는 element가 처음 생성된 자리에 고정시킨다. 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 20px;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#different {
width: 350px;
background-color: wheat;
position: fixed;
}
</style>
</head>
<body>
<div></div>
<div id="different"></div>
</body>
</html>보다시피 아래 박스에 fixed를 적용하였다. 그리고 결과를 확인해보면
정말 스크롤을 내려보아도 아래 박스는 제자리에 고정되어 움직이지 않는다.
이번엔 아래 박스에 top: 100px를 추가해보자.
#different {
width: 350px;
top: 100px;
background-color: wheat;
position: fixed;
}
그리고 결과를 확인해보면
보다시피 노란색 박스가 초록색 박스 위로 올라가 있다. 즉 완전히 다른 레이어가 된 것이다.
fixed로 고정을 시킨 상태에서 top, left, right, bottom 중 하나라도 사용하게 된다면 완전히 다른 레이어가 된다는 사실을 확인할 수 있다.
엘리먼트가 처음 위치한 곳을 기준으로 위치수정을 해야 할 일이 있을 수 있다. 이 때 사용하는 것이 relative이다.
초기 상태 엘리먼트가 다음과 같다고 하자.
그리고 다음의 코드와 같이 relative를 준 뒤 위치값을 설정해주자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
width: 100px;
position: relative;
top: -10px;
left: -30px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>그럼 엘리먼트는 다음과 같이 위치가 바뀐다.
방금 본 엘리먼트의 위치변화와 같이 relative를 이용하면 처음 위치한 곳을 기준으로 위치수정을 할 수 있다!
처음 위치한 곳이 아닌 특정한 위치를 기준으로 위치수정을 해야할 일이 있을 수 있다. 이 때 쓰는 것이 바로 absolute이다. 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
width: 100px;
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>
그리고 결과를 보면 다음과 같다.
absloute를 사용해보니 body의 맨 오른쪽으로 간다. 부모 박스 기준이아니다. 왜그럴까?
이는 absolute의 특성 때문이다. absolute는 가장 가까운 relative 부모를 기준으로 위치이동을 시켜준다.
이 때 relative가 설정이 안되있으면 그냥 body가 relative가 된다. 따라서 위 상황에서도 body를 기준으로 위치이동이 된 것이다.
그렇다면 body가 기준이 아니라 저 노란박스를 기준으로 위치이동을 시켜주고 싶다면 어떻게 할까?
바로 저 노란박스에 해당하는 div를 relative로 만들어주면 된다. 다음의 코드처럼 position을 추가해보자.
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
그리고 나서 결과를 확인해보면 다음과 같다.
노란색 박스를 기준으로 오른쪽에 초록색 박스가 붙어있음을 확인할 수 있다!
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #14.Combinators (0) | 2022.01.02 |
|---|---|
| [HTML/CSS] #13.Pseudo Selector (0) | 2021.12.27 |
| [HTML/CSS] #11.Media Query (반응형 웹디자인) (0) | 2021.12.10 |
| [HTML/CSS] #10.flexbox (0) | 2021.12.10 |
| [HTML/CSS] #9.그리드 (0) | 2021.12.09 |
