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 |