CSS3의 position

Pdi

Published in

POCS

7 min readAug 12, 2019

정적 배치 — position : static
상대 배치 — position : relative
절대 배치 — position : absolute
고정 배치 — position : fixed
유동 배치 — float : left / float : right

1. 정적 배치 — position : static

정적 배치는 웹 페이지가 작성된 순서대로 HTML태그의 출력 위치를 정하는 방식으로, 브라우저의 디폴트 배치 방식이다.
정적 배치에서 left, top, bottom, right 프로퍼티의 값은 위치에 영향을 주지 않는다.
또한 정적 배치에서 width, height 프로퍼티도 영향을 주지 않는다.

2. 상대 배치 — position : relative

기본 위치에서 left, top, bottim, right 프로퍼티의 값만큼 이동한 상대 위치에 배치.
상대 배치된 HTML 태그는 다른 태그의 위치에 영향을 주지 않는다.

예시)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div {
    display : inline-block;
    height : 50px;
    width : 50px;
    border : 1px solid lightgray;
    text-align : center;
    color : white;
    background : red;
}
#down:hover {
    position : relative;
    left : 20px;
    top : 20px;
    background : green;
}
#up:hover {
    position : relative;
    right : 20px;
    bottom : 20px;
    background : green;
}
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
<hr>
    <div>T</div>
    <div id="down">h</div>
    <div >a</div>
    <div>n</div>
    <div id="up">k</div>
    <div>s</div>
</body>
</html>

3. 절대 배치 — position : absolute

HTML 태그를 절대 위치에 배치할 수 있다.
절대 위치는 left, top, bottom, right 프로퍼티 값으로 정하며, 이 값들은 부모 태그 안에서의 상대 좌표이다.

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>절대 배치</title>
<style>
div {
    display : inline-block;
    position : absolute; /* 절대 배치 */
    border : 1px solid lightgray;
}
div > p { /* div의 자식 p */
    display : inline-block;
    position : absolute; /* 절대 배치 */
    height : 20px;
    width : 15px;
    background : lightgray;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<p>예수님이 탄생하셨습니다.</p>
<div>
    <img src="media/christmastree.png"
            width="200" height="200" alt="크리스마스 트리">
    <p style="left:50px; top:30px">M</p>
    <p style="left:100px; top:0px">E</p>
    <p style="left:100px; top:80px">R</p>
    <p style="left:150px; top:110px">R</p>
    <p style="left:30px; top:130px">Y</p>
</div>
</body>
</html>

※ 부모 태그가 position : relative 로 해야 제대로 나오는 경우가 있다.

4. 고정 배치 — position : fixed

left, top, right, bottom 프로퍼티의 값으로 뷰포트의 특정 위치에 고정시키는 배치 방식이다.
뷰포트(viewport : 브라우저의 보이는 영역)에 고정시켜 브라우저에 항상 보이게 한다.

예시)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>고정 배치</title>
<style>
#fixed {
    position : fixed;
    bottom : 10px;
    right : 10px;
    width : 100px;
    padding : 5px;
    background : red;
    color : white;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<img src="media/christmastree.png"
    width="300" height="300"
    alt="크리스마스 트리">
<div id="fixed">예수님이 탄생하셨습니다.
</div>
</body>
</html>

5. 유동 배치 — float : left / float : right

태그의 오른편이나 왼편에 항상 배치시킬 수 있다.
항상 같은 위치에 출력할 광고나 공지 등에 적합하다.

예시)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
#float {
    float : right; /* 뷰포트의 오른쪽에 붙여 */
    border : 1px dotted black;
    width : 7em; /* 7개의 글자 크기 */
    padding : 0.25em;
    margin : 1em;
}
</style></head>
<body>
<h3>학기말 공지</h3>
<hr>
<div>
<p id="float">
 24일은 피아니스트 조성진의 크리스마스 특별
  연주가 있습니다.</p>
<p>
  이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한
  Java, C++ 프로그래밍 열심히 하기 바랍니다.
   인턴을 준비하는 학생들은 프로젝트 개발에
   더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p>
</div>
</body>
</html>