티스토리 뷰

[개발]프로그래밍/css3

[css3] position - 배치 방법 지정

좋은 블로그 2021. 5. 11. 11:36
1. 개념
position - 배치 방법 지정
position 속성은 지정한 요소들을 원하는 위치에 배치할 수 있도록 해주는 속성
이 속성을 이용하게 되면 자신이 원하는 텍스트나 이미지 등을 원하는 위치에 배치하도록 함

속성

설명

static

문서의 흐름에 맞추어 배치(기본값)

relative

다른 요소와 함께 자연스럽게 연결해 배치하지만 위치는 지정할 수 있음

absolute

부모 요소를 기준으로 원하는 위치에 요소를 배치

fixed

자신이 원하는 위치에 고정적으로 배치
2. 태그
position
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
div
{
border : 1px solid #000 ;
width : 100px ;
height : 100px ;
}
</style>
<body>
1
<div style =' background : red ; ' > </div>
2
<div style =' background : yellow ; position : relative ; top : -30px ; left : 20px ; ' >
3
<div style =' background : blue ; position : absolute ; top : 50px ; left : 20px ; ' > </div>
</div>
4
<div style =' background : green ; position : fixed ; top : 180px ; left : 0px ; ' > </div>
</body>
</html>
결과 화면
position 사용 예제

코드 설명
1
position : 설정값 없음
position을 설정하지 않으면 기본값으로 static로 설정을 하게 됩니다.
이 static는 나열 순서대로 요소들을 배치하게 되며 위치 지정을 위한 top,right,bottom,left 등은 사용하실 수 없습니다.
만약 좌우로 배치를 하고 싶다고 하면 float를 활용해 가능합니다.
2
position : relative ;
relative은 static 처럼 요소를 나열한 순서대로 배치를 하게 되지만 static와는 다르게 좌표값을 이용해 위치를 지정할 수가 있습니다.
2번을 보게 되면 relative를 이용하지 않았으면 div는 블럭요소 이기 때문에 1번 밑으로 div가 생성이 되었을 것입니다.
하지만 relative를 사용하여 top과 left 값을 정해주니깐 해당하는 위치에 이동하여 2번 div를 표시해 주고 있습니다.
3
position : absolute ;
absolute는 나열한 순서가 의미가 없습니다.
즉, 이 속성을 사용하게 되면 자신이 원하는 위치에 배치하고자 할 곳에 배치가 됩니다.
그리고 이때 배치의 기준이 되는 위치는 가장 가까운 부모 요소 중에서 position이 relative로 설정된 요소가 됩니다.
그래서 absolute를 사용할 경우에는 보통은 부모 요소의 div로 감싸고 position 값으로 relative를 설정한 요소가 포함되어 있습니다.
이러한 설정을 바탕으로 abolute 값을 사용하기에 인지 해 주시면 됩니다.
4
position : fixed ;
fixed는 absolute와 동일하게 이전 요소와 상관없이 원하는 위치에 요소를 배치하는 속성입니다.
단지 차이가 있다고 하면 abolute의 부모 속성은 relative가 있는 요소가 위치의 기준으로 되지만 fixed는 브라우저 창 자체가 기준이 됩니다.
맨 왼쪽 위를 기준으로 거기서부터 어디에 있는지를 표시해주는 것입니다.
그리고 fixed는 말 그대로 고정이 되는 속성 값다 보니깐 창의 높이가 길어서 스크롤이 있을 때 스크롤을 내려도 그 자리에 고정이 되어 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] z-index - 쌓는 순서 지정  (0) 2021.05.13
[css3] visibility - 보이거나 숨기기  (0) 2021.05.12
[css3] float - 왼쪽,오른쪽 배치  (0) 2021.05.07
[css3] box-sizing - 박스 너비 기준  (0) 2021.05.06
[css3] padding - 내용과 테두리 사이의 여백 설정  (0) 2021.05.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday