static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
참고링크 :
[css] position (static, relative, absolute, fixed) 의 속성
[css] position (static, relative, absolute, fixed) 의 속성 position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다. position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(..
electronic-moongchi.tistory.com
1) z-position / 숫자가 클수록 앞에 위치한다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POSITION 속성 </title>
</head>
<style>
div.box{
width : 100px;
height: 100px;
border : 10px solid black;
text-align: center;
line-height: 100px;
font-size : 30px;
color : wheat;
/*포지션 앱솔루트*/
position: absolute;
margin : 0;
}
#box1{
background-image: url(image/tae1.jpg);
background-size : 100%;
/*위치설정*/
left : 50px;
top : 50px;
/*숫자가 클수록 앞에온다*/
z-index: 2;
}
#box2{
background-image: url(image/tae1.jpg);
background-size : 100%;
left : 100px;
top: 100px;
z-index: 3;
}
#box3{
background-image: url(image/tae1.jpg);
background-size : 100%;
left : 150px;
top : 150px;
z-index: 1;
}
#box4{
background-image : url(image/tae1.jpg);
background-size : 100%;
right : 50px;
bottom : 50px;
}
</style>
<body>
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</body>
</html>
2)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POSITION 속성 </title>
</head>
<style>
div.box{
width : 100px;
height: 100px;
border : 5px solid black;
text-align: center;
line-height: 100px;
font-size : 30px;
color : wheat;
position: absolute;
margin : 0;
}
#box1{
background-image: url(image/tae3.jpg);
background-size : 100%;
/*위치설정*/
left : 10px;
top : 10px;
}
#box2{
background-image: url(image/tae2.jpg);
background-size : 100%;
left : 20px;
top: 20px;
}
#box3{
background-image: url(image/tae4.jpg);
background-size : 100%;
left : 30px;
top : 30px;
}
#wrap{
position:relative;
height: 50px;
width : 300px;
border: 1px solid black;
overflow: auto;
}
</style>
<body>
<h1> H E A D E R</h1>
<div id="wrap">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
</div>
<h1>F O O T E R</h1>
</body>
</html>
3)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문제풀기</title>
<style>
div.sq{
width: 100px;
height: 100px;
border : 1px solid grey;
position: absolute;
margin : 0;
border-radius: 100px;
}
#sq1 {
background-color : pink;
background-image : url(image/tae8.gif);
background-size : 130%;
left : 10px;
top : 10px;
}
#sq2 {
background-image : url(image/tae9.gif);
background-size : 130%;
right : 10px;
top : 10px;
}
#sq3 {
background-image : url(image/tae10.gif);
background-size : 130%;
right:10px;
bottom:10px;
}
#sq4 {
background-image : url(image/tae11.gif);
background-size : 100%;
left:10px;
bottom:10px;
}
</style>
</head>
<body>
<div id="sq1" class=sq></div>
<div id="sq2" class=sq></div>
<div id="sq3" class=sq></div>
<div id="sq4" class=sq></div>
</body>
</html>
'front-end > HTML & CSS' 카테고리의 다른 글
| [css] button / 버튼만들기 (0) | 2020.11.24 |
|---|---|
| [css] background (0) | 2020.11.24 |
| [css] attribute / 속성 (0) | 2020.11.24 |
| [css] 선택자 (0) | 2020.11.23 |
| [html5] table (0) | 2020.11.23 |
| [html5] select (0) | 2020.11.23 |
| [html5] form tag / input type (0) | 2020.11.23 |