고정 헤더 영역
상세 컨텐츠
본문
▶ position 위치속성
: 어디에 어떻게 위치시킬지 지정하는 속성
요소를 특정한 위치로 지정하여 배치하는 속성
[ 함께 적용가능한 속성 ]
top - y축 상단기준
bottom - y축 하단 기준
left - x축 좌단기준
right - x축 우측기준
z-index - z축 위치상 우선순위 변경 ( z-index: 숫자가 클수록 상위 순서에 배치 1~9999까지 존재 )
[ 위치지정의 중요한 값 ]
- static
: 부여하지 않아도 적용되는 기본값 ( 정적위치 지정방식 )
다른 박스에 영향을 주며 작성한 순서대로 나열 ( 위치지정불가 )
top, left, right, bottom의 영향을 받지 않음
- absolute
: 절대 좌표와 함께 위치를 지정 ( 절대위치 지정방식 )
html화면 기준( x, y )을 기준으로 위치가 지정
만들어진 순서대로 위치에 배치 ( 위치지정가능 )
top, left, right, bottom의 영향을 받음.
- relative
: 상대 좌표와 함께 위치를 지정( 상대위치 지정방식 )
태그가 만들어진 순서대로 나열
다른 박스에 영향을 주며 작성한 순서대로 나열( 위치지정가능 )
** 부모박스의 역할로 주로 사용
top, left의 영향을 받음
- fixed
: 절대좌표와 함께 위치를 지정 ( 고정위치 지정 )
고정된 상태로 위치가 지정
스크롤과 상관없이 html화면기준 좌측상단을 기준으로 좌표고정
top, left, right, bottom의 영향을 받음
※ absolute, fixed로 설정시 크기가 100%가 되는 block태그의 특징이 무효화됨
명확한 사이즈 지정하여 표현!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position</title>
<style>
* {
padding: 0;
margin: 0;
}
.p1 {
width: 300px;
height: 300px;
background-color: aquamarine;
text-align: center;
line-height: 300px;
font-size: 30px;
position: fixed;
/*위치지정시 사용가능한 속성
- left, right( x축 기점으로 왼쪽으로 부터 얼마나큼 떨어질것인지 혹은 오른쪽에서 얼마나 떨어질것인지 )
- top, bottom ( 위에서 얼마큼 떨어질것인지 아래에서 얼마큼 떨어질것인지 )
* static - 기본값 ( 위치 영향을 받지 않음 )
* relative - 상대위치 ( 박스가 나열되는 순서대로 위치가 지정 _ top, left만 적용됨 )
* absolute -
절대위치 ( html화면기준으로 위치가 지정 - 위치값 모두 적용)
밖에 부모가 존재할때 부모의 기준으로 위치가 지정
* fixed - 고정위치( html 화면기준으로 위치가 지정 - 위치모두적용)
고정된 상태로 표현! - 메뉴, 배너
*/
bottom: 50px;
right: 50px;
}
body {
height: 3000px;
background-color: aliceblue;
}
.pbox {
width: 200px;
height: 200px;
background-color: aquamarine;
text-align: center;
line-height: 200px;
position: absolute;
top: 30px;
left: 30px;
}
.pbox:nth-child(1) {
z-index: 3;
/* 위치요소의 우선순위를 변경하는 속성 1~9999
숫자를 너무 높게는 주지말 것!*/
}
.pbox:nth-child(2) {
background-color: beige;
position: absolute;
top: 60px;
left: 60px;
z-index: 4;
}
.pbox:nth-child(3) {
background-color: burlywood;
position: absolute;
top: 90px;
left: 90px;
}
#position {
width: 400px;
height: 200px;
background-color: #bcbc2c;
position: relative;
/* 부모가준을 삼으며,
다른 박스의 영향을 받아 레이아웃이 제대로 표현되어질 수 있게!
*/
}
.nav {
width: 100%;
height: 200px;
text-align: center;
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- <h1>position</h1>
<p> : 요소를 특정한 위치로 지정하여 배치하는 속성 / 어떻게 위치할지 결정하는 속성 </p>
<div class="p1">
position
</div> -->
<div class="nav">menu</div>
<!-- 위치값을 사용하는 방법 -->
<div id="position">
<div class="pbox">box1</div>
<div class="pbox">box2</div>
<div class="pbox">box3</div>
</div>
</body>
</html>
♥ position_원본파일 ♥
