포지션(Position)

position은 언제 사용할까?!

 

position 속성의 종류

 

1) static - default값

2) relative 

3) fixed 

4) absolute

5) sticky 

 

 

position - static일때

  .blue {
	  background-color: #e46e80;
  }

blue 색깔를 position -> relative로 바꾸자 

  .blue {
    background-color: #5195ee;
    position:relative;
    /* 위에서 30px만큼 간격을 떨어뜨리자 */
    top: 30px; 
  }

 

  .blue {
    background-color: #5195ee;
    position:relative;
    /* 위에서 30px만큼 간격을 떨어뜨리자 */
    top: 30px; 
    /* 왼쪽으로부터 50px만큼 간격을 떨어뜨리자 */
    left: 50px;
  }

margin과 다른 점은?!

  .blue {
    background-color: #5195ee;
    position:relative;
    /* 위에서 30px만큼 간격을 떨어뜨리자 */
    margin-top: 30px; 
    /* 왼쪽으로부터 50px만큼 간격을 떨어뜨리자 */
    margin-left: 50px;
  }

positiion - absolute

 

예시 1 

- blue만 absolute 나머지는 static

- 기본 broswer 기준으로 포지셔닝된다

.blue {
  background-color: #5195ee;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:40px;
}

 

 

 

예시 2

- blue는 absolute  & green는 relative 

- green을 기준으로 포지셔닝된다

 

.green {
  background-color: #32b9c1;
  width: 300px;
  height: 300px;
  position: relative;
}


.blue {
  background-color: #5195ee;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:40px;
}

예시 3

- blue는 absolute  & red는 relative 

- red을 기준으로 포지셔닝된다

.red {
  background-color: #e46e80;
  width: 500px;
  height: 500px;
  position:relative;
}

.blue {
  background-color: #5195ee;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:40px;
}

예시 4

- blue는 absolute  & red, green 는 relative

- green을 기준으로 포지셔닝된다(red보다 green이 더 가까운 요소이다)

 

 

예시 4

- blue는 absolute  & red가 relative

- blue와 orange의 width없애버리기

 

예시 5

- green을 red위에 포개버리기

- red의 position을 relative로 준다. 

- green의 width, height을 없애 준 다음에 top, right, bottom, left  = 0을 만든다

.red {
  background-color: #e46e80;
  width: 500px;
  height: 500px;
  position: relative;
}

.green {
  background-color: #32b9c1;  
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

 

 

positiion - fixed

- 스크롤을 해도 top 100px만큼 고정이 된다

.red {
  background-color: #e46e80;
  width: 100%;
  height: 60px;
  position:fixed;
  top:100px;
}