1. position 속성
🥑 배치 방법을 지정하는 속성
🥑 각 요소의 위치를 정하는 방법
상대 위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정
절대 위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정
💡 함께 적용가능한 속성
top - y축 상단기준
bottom - y축 하단기준
left - x축 좌측기준
right - x축 우측기준
z-index - 요소의 쌓임 순서를 정의. 값이 클 수록 앞쪽에 배치 된다.
| 종류 | 설명 |
| static | 문서의 흐름(위에서 아래로 순서대로 배치)에 맞춰 배치. 기본값. |
| relative | 상대 좌표와 함께 위치를 지정 (상대위치 지정방식) 태그가 만들어진 순서대로 나열 |
| absolute | 절대 위치 좌표를 설정. 부모 박스 기준으로 좌표를 설정 단, 부모 요소가 static일 경우 부모 요소로 인식하지 않음 |
| fixed | 고정된 상태로 위치가 지정 |
static
위치지정불가 ) top, left, right, bottom의 영향을 받지 않음
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div>static-1</div>
<div>static-2</div>
<div>static-3</div>
</body>
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
/* position 속성을 지정하지 않은 상태 : static */
left: 100px; /* 좌표 인식이 안됨 */
top: 100px; /* 좌표 인식이 안됨 */
}
</style>
</head>
<body>
<div>static-1</div>
<div>static-2</div>
<div>static-3</div>
</body>
relative
위치지정가능) 부모박스의 역할로 주로 사용
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
position : relative; /* 상대좌표 */
top : 100px;
left : 100px;
}
</style>
</head>
<body>
<div>relative-1</div>
<div>relative-2</div>
<div>relative-3</div>
</body>
absolute
html 화면(x, y)을 기준으로 위치가 지정.
만들어진 순서대로 위쪽에 배치 (위치지정 가능) top, left, right, bottom의 영향을 받음.
기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소
absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position 속성을 relative로 지정해 놓고 사용해야 함
<head>
<style>
* {
margin: 0;
padding: 0;
}
.movie { /* 부모 요소 */
width: 700px;
height: 500px;
border: 2px solid gray;
background-color: darkslateblue;
position: relative; /* 상대 좌표 */
}
/* 자식 요소 */
/* 버튼 */
.movie div {
width: 120px;
height: 120px;
border: none;
border-radius: 120px;
background-color: antiquewhite;
text-align: center;
line-height: 120px;
font-size: 30px;
position: absolute;
}
.prev {
top: 50%; /* top으로의 위치 */
left: 10px; /* left로의 위치 */
margin-top: -60px; /* 반지름 값만큼 빼줘야 중앙 정렬이 됨 */
}
.play {
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.next {
top: calc(50% - 60px);
right: 10px;
}
</style>
</head>
<body>
<!--부모 요소 relative -->
<div class="movie">
<!--자식 요소 absollute -->
<div class="prev">PREV</div>
<div class="play">▶</div>
<div class="next">NEXT</div>
</div>
</body>
fixed
스크롤과 상관없이 html화면기준 좌측상단을 기준으로 좌표고정
top,left, right, bottom의 영향을 받음
<head>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 3000px; /* 스크롤 바를 나타내기 위해 문서의 높이를 임의의 크기로 지정 */
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
}
div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
background-color: red;
left: 100px; /* 왼쪽 좌표 */
top: 100px; /* 상단 좌표 */
position: absolute;
}
div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
background-color: orangered;
right: 100px; /* 오른쪽 좌표 */
bottom: 100px; /* 하단 좌표 */
position: fixed;
}
</style>
</head>
<body>
<div>absolute</div>
<div>fixed</div>
</body>
z-index
<head>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 300px;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
position: absolute; /* 절대 좌표 */
}
div:nth-of-type(1) { /* div 박스 중에서 첫 번째 박스 */
background-color: indianred;
left: 100px; /* 왼쪽 좌표 */
top: 100px; /* 상단 좌표 */
z-index: 5;
}
div:nth-of-type(2) { /* div 박스 중에서 두 번째 박스 */
background-color: lightgoldenrodyellow;
left: 250px; /* 왼쪽 좌표 */
top: 250px; /* 상단 좌표 */
z-index: 3; /* 우선 순위 변경 */
}
div:nth-of-type(3) { /* div 박스 중에서 세 번째 박스 */
background-color: teal;
left: 400px; /* 왼쪽 좌표 */
top: 400px; /* 상단 좌표 */
}
</style>
</head>
<body>
<div>box-1</div>
<div>box-2</div>
<div>box-3</div>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > CSS' 카테고리의 다른 글
| [CSS] 플렉스 박스 | 크기를 지정하지 않은 경우 속성 적용 결과 ver (0) | 2024.03.26 |
|---|---|
| [CSS] 플렉스(flex) 박스 | flex-direction, flex-wrap, justify-content, align-content, align-items (0) | 2024.03.26 |
| [CSS] 목록 스타일, 표 스타일 (1) | 2024.03.23 |
| [CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용 (0) | 2024.03.23 |
| [CSS] 배경 이미지 지정과 속성 (0) | 2024.03.22 |