position

• HTML 요소가 위치를 결정하는 방식을 설정하는 속성

1. static position (정적 위치)

2. relative position (상대 위치)
   --> 기본 위치를 기준으로 좌표를 사용하여 위치를 이동시키는 속성

3. absolute position (절대 위치)
   --> 부모요소를 기준으로 좌표를 사용하여 위치를 이동시키는 속성
   단, 부모 요소가 존재하지 않는다면 body를 기준으로 위치를 설정

4. fixed position (고정 위치)
   --> 화면을 기준으로 위치를 지정하는 방식 (웹 페이지가 스크롤되어도 고정된 위치에 요소를 둔다.)

5. z-index
   --> 겹쳐지는 요소들의 순서를 결정하는 속성
   --> 속성에 큰 숫자값을 지정할수록 화면 전면에 출력된다.
   --> position이 static 이외인 요소에만 적용된다.

   z-index 예시

  <style>
  #normal-box{
    width:500px;
    height: 500px;  
    background: orange;  
    z-index:1000;
}
.absolute-box{
    width:200px;
    height: 200px;
    position: absolute;
}
.one{
    background-color: red;
    left: 50px; top: 50px;
    z-index: 100;
}
.two{
    background-color: green;
    left: 100px; top: 100px;
    z-index:10;
}
.three{
    background-color: blue;
    left: 150px; top: 150px;
    z-index: 1;
}
  </style>
<div id="normal-box">1</div> 
<div class="absolute-box one">2</div>
<div class="absolute-box two">3</div>
<div class="absolute-box three">4</div>

position 부여 유무 차이

• position이 부여되면 left, right, top, bottom 속성명을 사용할 권한이 생긴다.

<style>
#test{
    width: 150px;
    height: 150px;
    background: green;
    border: 3px solid blue;
    left : 100px;
}
#test2{
    width: 150px;
    height: 150px;
    background: red;
    border: 3px solid blue;
    position: relative;
    left : 100px;
}

body{
    margin:0;
}

#par{
    width: 150px;
    height: 150px;
    background-color: steelblue;
    border: 3px solid red;
    margin: 30px;
}
#rel{
    position: relative;
    background-color: pink;
    text-align: center;
    line-height: 150px;
}
</style>
<div id="test">
    position 컨트롤
</div>
<div id="test2">
    position 컨트롤
</div> 

<div id="par">
    <div id="rel">relative 적용</div>
</div>

<div id="par2">
    <div id="rel2">relative 적용2</div>
</div>

relative vs absolute 비교

• absolute의 경우는 부모 요소를 기준으로 움직인다.

<style>
#fix{
    background-color: slateblue;
    width: 200px;
    height: 200px;
    position: fixed;}
</style>
 <div id="fix">
    나는 움직이지 않아
 </div>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>
 <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor qui laborum sapiente ullam harum, inventore excepturi sunt consectetur necessitatibus quaerat minima ut, et voluptatibus facere, nihil eum accusantium tempora porro?</h1>

--> 스크롤을 내려도 fixed 속성으로 인해 움직이지 않는다.

예시

 <style>
    body { margin: 0;}
    .parent {
      width: 150px;
      height: 150px;
      background: #bcbcbc;
      border: 1px solid #bcbcbc;
      margin: 50px 0 0 300px;
      float: left;
      position: relative;
    }
    .relative-box {
      position: relative;
      top: 10px; left: 10px;
      width: 150px;
      height: 150px;
      background: #2E303D;
      color: #e55c3c;
      font-weight: bold;
      text-align: center;
      line-height: 150px;
    }
    .absolute-box {
      position: absolute;
      top: 30px; left: 30px;
      width: 150px;
      height: 150px;
      background: #2E303D;
      color: #e55c3c;
      font-weight: bold;
      text-align: center;
      line-height: 150px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="absolute-box">absolute box</div>
  </div>

  <div class="absolute-box">absolute box</div>
  <div class="parent">
    <div class="relative-box">relative box</div>
  </div>

--> 부모의 높이와 너비 속성을 상속받는 것 처럼 보여지지만 그게 아니며 부모의 너비가 정해진 만큼 보여지는 것이다.

예시2

<style>
		.container {
			border: 3px solid red;
			width: 100%;
			height: 1000px;
			position: relative;
		}
		.position {
			width: 150px;
			height: 50px;
			top: 100px;
			left: 120px;
		}
		.static {
			border: 3px solid black;
			position: static;
		}
		.relative {
			border: 3px solid green;
			position: relative;
		}
		.fixed {
			border: 3px solid orange;
			position: fixed;
		}
		.absolute {
			border: 3px solid blue;
			position: absolute;
		}
	</style>

	<h1>정적 위치(static position) 지정 방식의 특징</h1>
	<div class="container">
		<div class="static position">정적 위치(static position)</div>
		<div class="relative position">상대 위치(relative position)</div>
		<div class="fixed position">고정 위치(fixed position)</div>
		<div class="absolute position">절대 위치(absolute position)</div>
	</div>

예시3

<style>
		div.relative {
			border: 2px solid #B8860B;
			width: 1000px;
			height: 200px;
			position: relative;
		} 
		div.absolute {
			border: 2px solid #006400;
			width: 200px;
			height: 100px;
			position: absolute;
			top: 50px;
			right: 0;
		}
	</style>

	<h1>절대 위치(absolute position) 지정 방식</h1>
	<div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정하였습니다.
		<div class="absolute">이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
	</div>
	<div class="absolute">이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
	<p>절대 위치는 해당 요소의 바로 상위의 위치가 설정된 조상(ancestor) 요소에 따라 위치를 재조정하는 방식입니다!</p>