HTML_CSS_034_css_position_

position 속성

• 기본값 default : static
  

Ex-1 position의 absolute 활용

html

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

css

section > div{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
section > div:nth-child(1){
  bottom:50%;
  right:50%;
  background-color:grey;
}
section > div:nth-child(2){
  bottom:50%;
  left:50%;
  background-color:black;
}
section > div:nth-child(3){
  top:50%;
  right:50%;
  background-color:white;
}
section > div:nth-child(4){
  top:50%;
  left:50%;
  background-color:gold;
}

Ex-2 transform 활용

• 기준점을 이동 시킬때 사용

html

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

css

section {
  width:200px;
  height:200px;
  border:10px solid red;
  position:absolute;
  top: 50%;
  left: 50%;
/*   기준 점에서 위치를 움직인다 */
  transform: translatex(-50%) translatey(-50%);
}
section > div {
  position:absolute;
  width:50%;
  height:50%;
}
section > div:nth-child(1) {
/*   top:0; */
  left:0;
  background-color:black;
}
section > div:nth-child(2) {
/*   top:0; */
  right:0;
  background-color:gold;
}
section > div:nth-child(3) {
  bottom:0;
  left:0;
  background-color:blue;
}
section > div:nth-child(4) {
  bottom:0;
  right:0;
  background-color:green;
}