position 속성 :
css에서 position 속성은 html 문서 상에 요소들이 배치되는 방식을 결정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: #ff0000;
position: static; /*상대 위치 */
}
#div2 {
width: 100px;
height: 100px;
background-color: #00ff00;
position: relative;
/*상대위치. 기준점(앞에 요소 div2의 앞요소는 div1) 위에서 얼만큼, 왼쪽에서 얼만큼 정해 주는거 */
top: 100px;
left: 50px;
}
#div3 {
width: 100px;
height: 100px;
background-color: #0000ff;
position: absolute;
/*절대 위치. 기준점이 항상 왼쪽 꼭대기 */
top: 50px;
left: 50px;
}
#div4 {
width: 100px;
height: 30px;
background-color: burly;
position: fixed;
/*고정위치. 스크롤이 이동해도 항상 제자리 */
top: 10px;
left: 300px;
}
</style>
</head>
<body>
<div id="div1">aaa</div>
<div id="div2">bbb</div>
<div id="div3">ccc</div>
<div id="div4">top으로</div>
</body>
</html>
'Front > css' 카테고리의 다른 글
| [css] 웹 페이지의 살 붙이기 - border 테두리 꾸미기 (0) | 2023.03.22 |
|---|---|
| [css] 웹 페이지의 살 붙이기 - button 이미지 넣기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - css파일로 불러오기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - 요소 선택 (1) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - css란 (0) | 2023.03.22 |
