🍁position
position은 요소의 위치를 지정하는 기능이다.
태그의 위치를 지정하는 방법
1. padding > 부모가 자식의 위치를 정한다.
2. margin > 스스로 위치를 지정한다.
3. position > 정석 (CSS1 ~ CSS3)
4. transform > 정석 (CSS3)
어떤 태그를 어떤 위치에 지정을 하고 싶을 때 사용할 수 있는 여러 가지 방법이 있다.
이때 정석은 position을 사용하는 방법이다.
position의 특징
position은 좌표값을 사용하여 위치를 지정한다.
좌표를 x, y라고 부르지 않고, left(x), top(y)이라고 부른다.
좌표를 지정하는 방식으로 여러 개를 제공한다. 좌표가 유효하려면 기준점이 어딘지를 알아야 하는데, 원점(기준점)이 다양하기 때문에 용도에 맞게 선택할 수 있게끔 방식이 다양하다.
🍁좌표를 지정하는 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 10px solid black;
width: 200px;
height: 200px;
}
#box1 {
background-color: tomato;
}
#box2 {
background-color: gold;
}
#box3 {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<h1>position</h1>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
</html>
위 코드를 이용하여 position의 기능을 구현해 보도록 하자.
1. position: static
static은 기본값으로, 정적 좌표를 의미한다.
말은 좌표라고 하지만 x, y 값을 사용할 수 없다.
워드 프로세스 방식(FlowLayout 방식)이다.
먼저 적힌 게 위에 출력되고, 나중에 적힌 게 나중에 출력된다.
이를 워드 프로세스 방식이라고 생각하면 되며, FlowLayout 방식이라고도 부른다.
즉, 코딩 순서대로 출력하는 방식을 position: static 값을 주었을 때의 모습이다.
#box2 {
position: static;
left: 150px;
top: 150px;
}
position: static을 정적 좌표라고 하는 이유는 좌표값을 주어도 움직이지 않기 때문이다.
2. position: absolute
position: absolute는 절대 좌표이다.
left(x) 값, top(y) 값을 사용할 수 있다.
자신의 직계 조상 중에서 가장 처음으로 만나는(position이 static이 아닌) 태그를 원점으로 한다.
문서의 좌측 상단을 원점으로 하는 좌표계가 아니므로 오해하지 않도록 한다.
#box2 {
position: absolute;
left: 0px;
top: 0px;
}
#box2 {
position: absolute;
left: 100px;
top: 50px;
}
노란색 상자가 이동하면서 원래 공간이 사라졌다.
그리고 파란색 상자가 위로 올라오게 된다.
position: absolute는 원래 태그가 있던 공간은 사라진다는 특징이 있다.
그리고 태그와 태그 영역의 일부가 겹치게 된다.
#box2 {
position: absolute;
left: -50px;
top: 50px;
}
태그에 음수값을 주어서 보이지 않게 할 수 있다.
아주 큰 양수값을 주더라도 스크롤바가 생기므로 스크롤을 내리면 보이게 된다.
상자 안에 상자가 있는 예시를 살펴보며 position: absolute의 원점에 대해서 더 이해해 보도록 하자.
⭐ position: absolute의 원점
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#b1, #b2, #b3 {
border: 10px solid black;
}
#b1 {
width: 500px;
height: 500px;
background-color: tomato;
}
#b2 {
width: 400px;
height: 400px;
background-color: gold;
margin: 40px;
}
#b3 {
width: 300px;
height: 300px;
background-color: dodgerblue;
margin: 40px;
}
</style>
</head>
<body>
<h1>position</h1>
<div id="b1">
박스1
<div id="b2">
박스2
<div id="b3">
박스3
</div>
</div>
</div>
</body>
</html>
위 코드는 빨간색 상자(상자1) 안에 노란색 상자(상자 2)가 들어 있고, 노란색 상자(상자 2)에 파란색 상자(상자 3)가 들어있는 상태이다.
이 상자에 position:absolute를 주어서 절대 좌표의 특징을 알아보도록 하자.
빨간색 상자(상자1)의 이동
#b1 {
width: 500px;
height: 500px;
background-color: tomato;
position: absolute;
left: 300px;
top: 300px;
}
빨간색 상자의 left, top을 변경했지만, 노란색 상자와 파란색 상자도 빨간색 상자에 속해 있기 때문에 3개의 상자가 모두 함께 움직인다.
노란색 상자(상자2)의 이동
#b2 {
width: 400px;
height: 400px;
background-color: gold;
margin: 40px;
position: absolute;
left: 300px;
top: 300px;
}
그런데 노란색 상자의 left, top을 변경하자 빨간색 상자를 벗어나 이동한다.
노란색 상자(상자2)와 파란색 상자(상자 3)의 이동
#b2 {
width: 400px;
height: 400px;
background-color: gold;
margin: 40px;
position: absolute;
left: 300px;
top: 300px;
}
#b3 {
width: 300px;
height: 300px;
background-color: dodgerblue;
margin: 40px;
position: absolute;
left: 300px;
top: 300px;
}
파란색 상자의 아버지는 노란색 상자이고, 노란색 상자의 아버지는 빨간색 상자이다.
절대 좌표는 static이 아닌 태그를 원점으로 하므로 문서 구조가 복잡해지면 가장 헷갈리는 좌표가 되기도 한다.
left top right bottom
좌표를 지정하는 속성에는 left와 top 외에도 right와 bottom도 있다.
두 가지 속성을 주면 완전히 다른 모양이 된다.
4가지 방향 모두 사용자가 원하는 방향을 원점으로 만들기 위해 사용할 수 있다.
top right
<div id="box4" class="box">상자4</div>#box4{
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
top: 0px;
right: 0px;
}
top, right 속성을 0으로 주면 상단 우측이 원점이 된다.
right bottom
#box4{
width: 300px;
height: 300px;
background-color: orange;
position: absolute;
right: 0px;
bottom: 0px;
}
right, bottom 속성을 0으로 주면 하단 우측이 원점이 된다.
3. position: relative
position: ralative는 상대 좌표이다.
left(x) 값, top(y) 값을 사용할 수 있다.
나를 기준으로 하는 좌표계이다.
#box2 {
position: relative;
left: 0px;
top: 0px;
}
상대 좌표는 원래 자기가 있어야 할 자리가 (0, 0)이다.
#box2 {
position: relative;
left: 150px;
top: 150px;
}
position: relative는 원래 태그가 있는 공간은 그대로 유지된다는 특징이 있다.
원래 있던 공간이 있어야 상대 좌표를 사용할 수 있기 때문에 태그의 공간을 유지하는 것이다.
파란색 상자의 위치가 absolute와 relative에 따라서 달라지므로 특징을 정확히 이해해야 한다.
4. position: fixed
position: fixed는 고정 좌표이다.
left(x) 값, top(y) 값을 사용할 수 있다.
브라우저 화면의 좌측 상단을 원점으로 하는 좌표계이다.
#box2 {
position: fixed;
left: 0px;
top: 0px;
}
position: absolute와 마찬가지로 문서의 좌측 상단이 (0, 0)인 거 같다.
그런데 이는 틀린 말이다!
position: fixed는 눈에 보이는 브라우저의 창(화면)의 좌측 상단을 원점으로 한다. 그래서 스크롤의 반응을 하지 않는다.
스크롤 바 생성
<body>
<h1>position</h1>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<!-- (p>lorem)*30 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eum ipsum hic vero adipisci, perspiciatis dolorem fuga! Dolorum fugit ipsum cumque mollitia similique, fugiat commodi nihil. Sapiente repellendus vitae est.</p>
<p>Accusantium ipsum quasi est libero voluptatum possimus earum nesciunt? Ut quas repudiandae, voluptatum atque, rerum dolore quaerat ratione recusandae impedit, id provident doloremque quisquam sequi ullam repellat voluptate! Voluptatem, dignissimos?</p>
<p>Praesentium, odit saepe excepturi, illum temporibus nulla provident aut recusandae magni facilis, ipsa ad itaque eos enim rerum ipsam vero aliquid? Fuga deleniti maxime distinctio deserunt nam, inventore porro unde.</p>
<p>Voluptatibus natus corrupti dolore itaque cumque minus excepturi non fugiat, fuga quasi assumenda consequatur deserunt? Voluptatum, quis. Ut atque sapiente, error, veritatis nulla corrupti, animi nostrum vero illo ducimus porro.</p>
<p>Praesentium quis voluptates a fugiat, optio culpa voluptas laudantium excepturi? Impedit veritatis possimus id, illum repudiandae molestias cupiditate iure in inventore quibusdam optio accusamus obcaecati earum harum vero tempore ipsam.</p>
<p>Laudantium molestias amet voluptatum aut alias commodi? Autem, quaerat. Magni ad eligendi ullam illum et, totam fuga. Ullam, odit. Soluta nisi, qui debitis culpa repellendus tempora rerum commodi magni repellat!</p>
<p>Repellendus iste blanditiis labore minima atque maiores tenetur inventore earum doloribus eum! Nam voluptate maxime, commodi doloremque sint pariatur asperiores velit, omnis, possimus ea earum fugiat nemo excepturi natus libero.</p>
<p>Doloremque deserunt excepturi rerum repellendus obcaecati sed explicabo quos, ratione maiores cumque placeat aliquid reiciendis voluptatibus autem! Quaerat, rem mollitia? Aliquid magnam harum autem iure reiciendis dolores excepturi? Corrupti, voluptates!</p>
<p>Explicabo harum, dolores necessitatibus dicta accusamus aut sint architecto consequatur aliquid, iusto voluptatum labore at beatae debitis suscipit molestias aperiam, eius tempora earum distinctio voluptas inventore eligendi possimus. Delectus, sunt.</p>
<p>Vero quas beatae sapiente ducimus ipsum sint unde, vitae voluptatibus modi alias officia quod dolorum praesentium aspernatur mollitia nesciunt error corporis! Perspiciatis sequi laudantium sint illum unde ad cum quibusdam.</p>
<p>Voluptatibus rem similique ipsa ipsum culpa incidunt esse eligendi minima ducimus architecto voluptas amet aliquam dicta placeat reprehenderit, nisi, magni, nobis explicabo dignissimos dolorem unde eos temporibus? Ea, dolor minima!</p>
<p>Nobis sit, error, iusto odit molestias aspernatur possimus, facere perferendis exercitationem voluptates itaque repellat eos corrupti mollitia eveniet unde quam. Veritatis architecto esse porro quibusdam. Deleniti illum aperiam maiores doloribus.</p>
<p>Voluptatum quo neque maxime, architecto enim dolores quos temporibus, provident dolorum expedita itaque doloremque eum, praesentium ratione nemo cupiditate nulla aliquam minus aliquid nisi. Dolores ipsam laboriosam minus nemo voluptatibus.</p>
<p>Tempora amet possimus facilis inventore, doloremque totam voluptas nam corrupti? Tempore autem deserunt esse saepe. Quos, doloribus possimus tempore ipsum quaerat numquam? Omnis beatae molestiae mollitia nemo blanditiis adipisci enim?</p>
<p>Ullam nobis praesentium, perferendis cupiditate placeat facere quisquam magnam quas enim pariatur cum dignissimos. Officia, error eligendi amet sapiente nostrum pariatur sit officiis? Minus doloribus quam minima non ut id?</p>
<p>Quas, aperiam. Eligendi officia saepe facere nam, impedit natus quisquam neque. Doloribus neque fuga repellat hic. Quas veniam, quam ipsum quasi itaque pariatur, nemo quidem doloremque dolores voluptate explicabo maiores?</p>
<p>Nobis soluta temporibus eos voluptate rerum, necessitatibus omnis explicabo corporis unde officia quaerat ratione modi impedit a dolor ullam tempore suscipit asperiores amet quae repellat perspiciatis quam. Recusandae, quo molestiae?</p>
<p>Sint tenetur ratione quis sapiente earum? Eaque necessitatibus sapiente itaque sint nulla, ipsam, quo aperiam, id facere pariatur veritatis sunt? Iste recusandae doloribus voluptatibus assumenda consequuntur! Doloribus recusandae veniam dignissimos?</p>
<p>Repellendus nemo at eum fugiat totam dolorum consequuntur beatae aut reiciendis praesentium velit quam non, minus neque atque voluptas nihil est eos quis explicabo! Quia, sint. Distinctio, neque. Expedita, enim!</p>
<p>Adipisci enim ea rem illo exercitationem eum? Facere perspiciatis eius nulla esse adipisci ea vero et quibusdam expedita beatae, quos dolores omnis quidem? Sequi quia nostrum natus molestias veniam aperiam.</p>
<p>Tempore dolor at iste ad incidunt unde minima quisquam in maiores eum et libero assumenda beatae itaque, laboriosam ex blanditiis culpa illo veniam, quas quod, doloremque pariatur saepe sapiente! Cum!</p>
<p>Nobis, minima placeat? Magni quam qui, dicta voluptatem nesciunt deserunt recusandae totam eligendi exercitationem harum. Ipsam amet impedit, fugit architecto fuga nemo, harum a praesentium consectetur obcaecati voluptas facilis saepe?</p>
<p>Nihil maxime eligendi inventore fugit temporibus nemo, nam eum aliquid debitis rerum sapiente enim officiis aliquam odio. Quos dolorem rem laborum ab sequi, consequatur quas voluptas, ratione obcaecati quaerat iste?</p>
<p>Magni mollitia hic nihil eos, quis accusamus veritatis, ad accusantium, et voluptate impedit cum saepe inventore dolore! Alias consequuntur similique dolores hic nostrum doloribus, quia inventore a. Asperiores, ut numquam?</p>
<p>Repudiandae nisi atque autem assumenda itaque est totam, eius veritatis accusamus consequuntur hic, officiis velit consequatur! Tempore modi mollitia quibusdam error autem, excepturi exercitationem incidunt vel, nemo voluptatibus soluta asperiores!</p>
<p>Nisi sint error a minima commodi corrupti sequi nam similique! Praesentium amet quod odit a voluptate officiis eaque veritatis laborum. Illo quod, nihil ut ducimus ipsam cumque aliquid aspernatur eos.</p>
<p>Atque ipsa laboriosam, officia inventore consequuntur quia voluptate nihil? Illo, quasi in fugit tempore consequuntur, doloribus, ab voluptates excepturi obcaecati debitis iste omnis eius ad inventore perspiciatis. Officiis, ullam provident.</p>
<p>Velit laudantium pariatur sapiente fuga necessitatibus maiores, atque eaque architecto praesentium distinctio, consequatur ex placeat voluptatem sequi soluta aliquid. Ea, officiis sed modi commodi rem nobis dolorum fuga vitae rerum!</p>
<p>Voluptates voluptatibus molestiae deleniti, harum ullam consequuntur enim minima dolores quod assumenda in eos eum dicta distinctio id incidunt autem dolor laudantium corrupti cum obcaecati. Voluptate, aspernatur. Quaerat, error dicta.</p>
<p>Accusantium voluptates quos blanditiis cum amet eaque maxime exercitationem rerum, culpa repellendus ut reprehenderit qui suscipit dolores similique, ullam corporis nihil. Sequi a molestias quam qui earum eius, eum dolore!</p>
</body>
스크롤바가 생겼을 때, fixed는 absolute와 차이를 보인다.
스크롤을 이동하더라도 노란색 박스가 고정되어 있는 것을 볼 수 있다.😮
position: fixed는 붙박이 메뉴, 붙박이 광고를 만들 때 사용한다.
네이버의 검색창
네이버의 검색창도 position: fixed로 만든 것이다.
5. 기타등등..
🍁박스 출력 순서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 10px solid black;
width: 200px;
height: 200px;
}
#box1 {
background-color: tomato;
position: absolute;
}
#box2 {
background-color: gold;
position: absolute;
left: 150px;
top: 100px;
}
#box3 {
background-color: cornflowerblue;
position: absolute;
left: 50px;
top: 200px;
}
</style>
</head>
<body>
<h1>position</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
</html>
코딩 순서에 따라서 화면 위에 출력되는 박스가 달라진다.
그러나 화면 위에 출력되는 걸 바꾸겠다고 코딩 순서를 바꾸는 것은 적절한 방법이 아니다.
z-index
#box1 {
background-color: tomato;
position: absolute;
z-index: 2;
}
#box2 {
background-color: gold;
position: absolute;
left: 150px;
top: 100px;
z-index: 1;
}
#box3 {
background-color: cornflowerblue;
position: absolute;
left: 50px;
top: 200px;
}
빨간색 상자에 z-index를 2, 노란색 상자에 z-index를 1 부여하자 파란색 박스 위로 올라왔다.
이처럼 z-index 속성을 부여하여 출력되는 박스의 순서를 바꿀 수 있다.
