position은 웹 문서 안의 요소를 배치할 때 쓰는 속성입니다. margin으로도 요소를 이동시킬 수 있지만, margin을 사용할 경우 주변에 있는 요소도 영향을 받기때문에 하나의 요소를 이동시킬 땐 position을 사용하는 게 더 적합합니다.
position을 이용하면 하나의 텍스트나 이미지를 원하는 곳에 손쉽게 배치할 수 있습니다.
그럼 먼저 position에는 어떤 속성이 있는지 알아봅시다.
position속성은 크게 아래와 같이 두가지로 나뉩니다.
static은 문서에 흐름에 맞추어 배치된 상태이고, 나머지인 relative, absolute, fixed는 좌표를 이용해서 각 요소의 위치를 변경할 수 있습니다. 위치는 top, bottom, right, left를 사용하여 지정합니다.
1. 정의
1. static
static은 기본값으로 요소가 나열된 순서대로 배치된 상태입니다.
2. relative, absolute, fixed
1) relative
: 원래 있었어야 할 위치를 기준으로 좌표가 이동
2) absolute
: 가장 가까운 부모 요소 중, position이 relative인 부모 요소를 기준으로 좌표가 이동
→ 가장 가까운 위치에 있는 조상 요소를 기준으로 배치된다.
3) fixed
: 브라우저 창의 왼쪽 위 꼭지점을 기준으로 좌표가 이동
보통 fixed 포지션은 브라우저를 기준으로 이동하기 때문에 네비게이션 바에서 주로 쓰입니다:)
(네비게이션 바는 스크롤을 내려도 페이지의 상단에 계속 떠있게 하고 싶기 때문이죠 ㅎㅎ)
2. 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<div class="text">
<b>What Do Americans Do to Boost Their Mood?</b>
How do you get yourself out of a bad mood? Do you exercise, talk to a friend, cook — or do you immediately reach for the chocolate cake and a glass of wine? A recent survey of just over 2,000 Americans by OnePoll asked a similar question. The survey was done for Hope Foods, a Colorado-based maker of food dips.
Forty-three percent of participants said they ate something to feel better, making eating the top mood-boosting activity. Half of this group chose "sweet treats," and 38% preferred "salty snacks." Other top short-term mood-boosting activities included taking a bath, reading a book or watching TV, cooking or baking, and meditation or deep breathing. Many also said cleaning up helps boost their mood. Only one in 10 said they'd have an alcoholic drink.
When asked what types of things can have a negative impact on their mental health, participants were most likely to say stressful life events, poor sleep and stress in general. One in four also said their diet impacted their mental health — and 72% said that eating healthier food made them feel better. Forty-five percent of participants reported that they frequently experience mental health problems. And one in 10 said they only feel like they're in a good mood one day a week.
When asked what they have done to improve their long-term mental health, the participants' top answers included changing their sleeping habits, changing their exercise routine, changing their diet, and giving up a bad habit.
A 2007 study using data from the World Health Organization found that about half of Americans will develop a mental illness at some time in their life.
</div>
</div>
</body>
</html>.content {
margin: 40px;
width: 700px;
border: 2px solid blue;
position: relative;
}
1. static : 기본값, 요소가 나열된 순서대로 배치
2. relative, absolute, fixed
1) relative : 원래 있었어야 할 위치를 기준
.content {
margin: 40px;
width: 700px;
border: 2px solid blue;
position: relative;
}
b {
position: relative;
bottom: 20px;
right: 20px;
}
2) absolute: : 'position: relative'인 부모 요소를 기준
.content {
margin: 40px;
width: 700px;
border: 2px solid blue;
position: relative;
}
b {
position: absolute;
bottom: 20px;
right: 20px;
}
3) fixed : 브라우저 창 왼쪽 위 꼭지점을 기준
.content {
margin: 40px;
width: 700px;
border: 2px solid blue;
position: relative;
}
b {
position: fixed;
top: 20px;
left: 20px;
}
*** absolute가 조금 이해하기 힘들 수 있어서 예시를 하나 더 줘보겠습니다.
아래처럼 세개의 div 박스가 있습니다. red의 자식은 orange이고, orange의 자식은 green입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="red">
<div class="orange">
<div class="green">
</div>
</div>
</div>
</body>
</html>
.red {
background-color: red;
width: 600px;
height: 600px;
position: relative;
}
.orange {
background-color: orange;
width: 300px;
height: 300px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
}
우리는 css를 조금 바꿔서 green에 'position: alsolute'를 줄 것입니다. 그러면 green은 좌표를 이동하기위해 가장 가까운 부모중 position이 relative인 녀석을 찾겠죠? green의 포지셔닝 된 가장 가까운 조상은 바로 red입니다. 그래서 geen박스는 red를 기준으로 이동할 것입니다.
.red {
background-color: red;
width: 600px;
height: 600px;
position: relative;
}
.orange {
background-color: orange;
width: 300px;
height: 300px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
top: 30px;
right: 30px;
}
짜잔 ~ 이동한거 보이시죠?
'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] flex- box로 요소 배치하기 (0) | 2021.08.21 |
|---|---|
| HTML/CSS] float을 이용하여 왼쪽/오른쪽 정렬하기 (0) | 2021.08.20 |
| HTML/CSS] baseline이란? (0) | 2021.07.09 |
| HTML/CSS] a 태그 활용하기 (0) | 2021.07.08 |
| HTML/CSS] 이미지(img) 가운데 정렬 (1) | 2021.07.07 |
