5-4. position 속성
float 속성이 요소를 화면의 좌측 또는 우측에 배치하는 데 사용되는 반면 position 속성은 HTML 요소의 위치를 지정하는 데 사용됩니다.
position 속성의 속성 값에는 relative, absolute, fixed 등이 있습니다.
■ 상대 위치 지정 - position : relative
position 속성 사용 예
ex5-9.html
<style>
div {
width: 100px;
height: 60px;
background-color: orange;
border: solid 1px black;
}
div.b {
position: relative;
left: 60px;
top: 30px;
}
</style>
<body>
<h3>상대 위치 지정(position: relative)</h3>
<div>요소 A</div>
<div class="b">요소 B</div>
<div>요소 C</div>
</body>
ex5-9.html의 실행 결과
■ 절대 위치 지정 - position : absolute
position 속성 값 : absolute
ex5-10.html
<style>
div {
width: 100px;
height: 60px;
background-color: orange;
border: solid 1px black;
}
div.b {
position: absolute;
left: 80px;
top: 50px;
}
</style>
<body>
<h3>절대 위치 지정(position: absolute)</h3>
<div>요소 A</div>
<div class="b">요소 B</div>
<div>요소 C</div>
</body>
ex5-10.html의 실행 결과
position: absolute가 사용되는 요소에 대해 부모 요소가 존재할 경우에는 브라우저 원점이 아니라 부모 요소를 기준으로 해당 요소가 이동합니다.
position : absolute 사용 예
ex5-11.html
<style>
div {
width: 100px;
height: 60px;
background-color: orange;
border: solid 1px black;
}
div.b {
position: absolute;
left: 80px;
top: 50px;
}
</style>
<body>
<h3>절대 위치 지정(position: absolute)</h3>
<div>요소 A</div>
<div class="b">요소 B</div>
<div>요소 C</div>
</body>
ex5-11.html의 실행 결과
■ 위치 고정 - position : fixed
position : fixed 사용 예
ex5-12.html
<style>
p {
width: 500px;
height: 1000px;
border: solid 1px red;
}
div {
position: fixed;
top: 20px;
right:20px;
padding: 20px 50px;
background-color: orange;
}
</style>
<body>
<h3>위치 고정(position: fixed)</h3>
<p>안녕하세요.<br>안녕하세요.<br>안녕하세요.<br>안녕하세요.<br></p>
<div>배너</div>
</body>
ex5-12.html의 실행 결과
■ 기업 연혁 만들기
<style>
* { margin: 0; padding: 0; }
li { list-style-type: none; }
#story {
width: 800px;
margin: 0 auto;
position: relative;
border: solid 1px blue;
}
#story h2 {
margin-top: 30px;
padding: 10px;
color: white;
background-color: green;
}
#story .item1 {
width: 200px;
position: absolute;
left: 0; top: 90px;
border: solid 1px red;
}
#story .item1 h3 { padding: 10px 0; }
#story .item1 p { line-height: 200%; }
#story .item2 img { width: 210px; }
#story .item2 {
width: 210px;
position: absolute;
left: 235px; top: 90px;
border: solid 1px red;
}
#story .item3 {
width: 318px;
position: absolute;
left: 480px; top: 90px;
border: solid 1px red;
}
#story .item3 li { margin-bottom: 10px; }
#story .item3 span { font-size: 20px; font-weight: bold; }
</style>
<body>
<div id="story">
<h2> 기업 연혁</h2>
<div class="item1">
<h3>2021 ~ 현재</h3>
<p>환경과 사람을존종하는 기업'우리 기업' 환경 관련 우수기업 대통령상을 수상하다.</p>
</div>
<div class="item2">
<img src="img/flower7.jpg"></li>
</div>
<ul class="item3">
<li><span>2026</span> 여수 엑스포 박람회 참가</li>
<li><span>2025</span> 여수 엑스포 박람회 참가</li>
<li><span>2024</span> 여수 엑스포 박람회 참가</li>
<li><span>2023</span> 여수 엑스포 박람회 참가</li>
<li><span>2022</span> 여수 엑스포 박람회 참가</li>
<li><span>2021</span> 여수 엑스포 박람회 참가</li>
</ul>
</div> <!-- story -->
</body>
ex5-13.html의 실행 결과
