●Position
자유자재로 요소의 위치를 배치하는 속성
○relative
static의 원래 위치부터 계산함
top, bottom, left, right로 위치 설정
z-index
요소의 쌓이는 순서를 지정하는 속성
position 속성이 있어야 작동함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* position : 요소의 위치를 배치하는 속성 */
/* 기본값 : static(태그가 위에서 아래로 순서대로 배치) */
/* relative : 초기 위치에서 상하좌우로 상대적으로 이동 */
/* z-index : 요소의 쌓이는 순서를 지정하는 속성. position속성이 있어야함
숫자가 높을수록 화면 위로
숫자가 낮을수록 화면 뒤로*/
div {
width: 200px;
height: 200px;
}
#tomato {
background-color: tomato;
position: relative;
z-index: 10;
}
#orange {
background-color: orange;
position: relative;
/* 100px만큼 올라감 */
bottom: 100px;
/* 100px만큼 왼쪽에서 떨어짐 */
left: 100px;
/* 숫자가 높은게 더 앞으로나옴 */
z-index: 5;
}
#green {
background-color: green;
position: relative;
bottom: 200px;
left: 200px;
z-index: 100;
}
</style>
</head>
<body>
<div id="tomato"></div>
<div id="orange"></div>
<div id="green"></div>
</body>
</html>
○absolute
static속성을 가지고 있지 않은 부모 기준으로 움직임
부모 중 포지션이 relative, absolute, fixed인 태그가
없다면 가장 위 태그(body)가 기준이 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* position : absolute
-> 지정된 부모요소(static이 아닌)를 기준으로 해서 절대위치좌표
-> 부모요소가 static이라면, body태그(보고있는 화면전체)를 기준으로 한다.*/
#parents{
width: 100%;
height: 500px;
border: 10px solid black;
position: relative;
}
#child{
width: 200px;
height: 200px;
background-color: aquamarine;
/* relative : 내 위치를 기준으로 움직임 */
/* absolute : 부모 요소 내에서 움직임 */
position : absolute;
/* 부모를 기준, 밑에서 50위로, 왼쪽에서 50밀림 */
bottom: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="parents">
<div id="child"></div>
</div>
</body>
</html>
○fixed
화면을 기준으로 절대위치좌표
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* position : fixed
-> 화면을 기준으로 절대 위치 좌표*/
a{
border: 10px solid green;
position: fixed;
right: 50px;
bottom: 100px;
}
</style>
</head>
<body>
<h1 id ="top"> 맨 위 입니다. </h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top"> 맨 위로 가겠습니다</a>
</body>
</html>
코딩공부