태그들을 위치를 지정할 수 있는 속성
| style="position:속성값" |
속성값 종류
- absolute
- relative
- static
- fixed
1. absolute
자신을 포함한 영역의 좌측 상단을 기준으로 지정된 위치에 고정 시킬 때 사용합니다.
[실행코드]
<html>
<head>
<title>position:absolute</title>
<style>
.outer1 { border: 1px solid #0000ff;
position:absolute;
width:300px;
height:200px;
left:20px;
top:50px;
}
.outer2 { border: 1px solid #0000ff;
position:absolute;
width:300px;
height:200px;
left:20px;
top:300px; /*이곳이 바뀌었어요 ^^ */
}
.inner{
border:1px solid #aaaaaa;
background-color:#dddddd;
position:absolute;
left:50px;
right:50px;
bottom:50px;
top:50px
}
</style>
</head>
<body>
<h4>position:absolute<hr/></h4>
<div class='outer1'>
outer 1
<div class='inner'> inner 1 </div>
</div>
<div class='outer2'>
outer 2
<div class='inner'> inner 2 </div>
</div>
</body>
</html>
[실행결과]
outer2 의 위치중 top:300px로 이동한 결과 입니다. inner2의 위치가 outer2의 위치가 어디에 있던 상관없이 outer2의 좌측 상단을 (0,0)으로 계산하여 inner2가 배치되는 것을 알 수 있습니다.
2. relative
원래 있어야 할 위치로 부터 left/top 크기 만큼 이동 됩니다. 원래 있어야 위치의 공백으로 남아 있습니다.
[실행코드]
<html>
<head>
<title>position:relative</title>
<style>
.center{position: relative;left: 100px; top: 100px}
</style>
</head>
<body>
<h4>position:relative<hr/></h4>
<div>ㄱㄱㄱㄱㄱㄱ</div>
<div class='center'>ㄴㄴㄴㄴㄴㄴ</div>
<div>ㄷㄷㄷㄷㄷㄷ</div>
</body>
</html>
[실행결과]
3. static
입력한 순서대로 출력됩니다. position의 기본값입니다. 따라서 left/top 을 지정하여도 적용되지 않습니다.
[실행코드]
<html>
<head>
<title>position:static</title>
<style>
.center{position:static;left:10px;top:100px;}
</style>
</head>
<body>
<div>ㄱㄱㄱㄱㄱㄱ</div>
<div class='center'>난 고정이야...</div>
<div><pre>ㄷㄷㄷㄷㄷㄷ
ㄷㄷㄷㄷㄷㄷㄷㄷ
</pre>
</div>
</body>
</html>
[실행결과]
4. fixed
웹페이지의 좌측상단을 기준으로 left/top이 적용됩니다. 자신을 포함한 영역이 어디에 있던 상관없이 무조건 지정된 위치에 표시합니다.
[실행코드]
<html>
<head>
<title>position:static</title>
<style>
.outer{ border: 1px solid #0000ff;
position:absolute;
width:300px;
height:200px;
left:150px;
top:150px;
}
.inner{position:fixed;left:10px;top:100px;}
</style>
</head>
<body>
<div class='outer'>
<div class='inner'>난 무조건 지정된 위치...</div>
<div>
</body>
</html>
[실행결과]
'BOOK > DHTML' 카테고리의 다른 글
| 외부 스타일 파일 참조 (0) | 2021.08.01 |
|---|---|
| 리스트 스타일 지정 (0) | 2021.08.01 |
| 테두리와 스타일 (0) | 2021.08.01 |
| 바탕이미지 스타일 (0) | 2021.08.01 |
| 문단모양과 스타일 (0) | 2021.08.01 |
댓글