position-static
<head>
<style>
span,
div {
/*position: static;*/ /* satatic은 생략해도 같다*/
background: yellow;
border: 1px solid blue;
}
</style>
</head>
<body>
<span>span 항목1</span>
<span>span 항목2</span>
<span>span 항목3</span>
<div>div 항목</div>
</body>position-relative
<head>
<style>
span, div {
background: yellow;
border: 1px solid black;
}
.sp1 {
position: relative;
top: 5px;
z-index: 1; /* 우선순위 */
}
.sp2 {
position: relative;
top: 8px;
right: 10px;
z-index: 2;
}
.sp3 {
position: relative;
bottom: 5px;
}
.di {
position: relative;
left: 5px;
}
</style>
</head>
<body>
<span class="sp1">span 항목1</span>
<span class="sp2">span 항목2</span>
<span class="sp3">span 항목3</span>
<div class="di">div 항목</div>
</body>position-absolute
<head>
<style>
/* static을 제외한 속성을 부모, body, html으로 상속 */
#absolute {
/* 전체화면 기준으로 100px */
background: aqua;
position: absolute;
bottom: 100px;
right: 100px;
}
#parent {
position: relative;
width: 100px;
height: 100px;
background: yellow;
}
#child {
/* parent를 기준으로 10px */
background: greenyellow;
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div id="absolute">Absolute</div>
<div id="parent">
<div id="child">Child</div>
</div>
</body>position-fixed
파란색 box만 고정되어있고 뒷배경만 움직임.
css 파일 생성 후 경로 연결
#box1 {
width: 500px;
height: 200px;
background-color: gray;
}
#fixed_parent {
width: 500px;
height: 500px;
background-color: yellow;
}
#fixed_child {
position: fixed;
width: 200px;
height: 200px;
background-color: blue;
}
#box2 {
width: 500px;
height: 2000px;
background-color: plum;
}<head>
<link rel='stylesheet' type='text/css' media='screen' href='./css/fixed.css'>
</head>
<body>
<div id="box1"></div>
<div id="fixed_parent">
<div id="fixed_child"></div>
</div>
<div id="box2"></div>
</body>
나야