@import "../../common/modern-reset.css";

div:not(#aweChromeHelper) {
  font-size: 3rem;
  padding: 10px;
  border: 1px solid currentColor;
}

/* 요소 박스 위치 지정 */
.percentage-value {
  border: 1px solid currentColor;
  padding: 1em !important;
  font-size: 1rem !important;
  padding: 10px !important;
  margin: 1em;
  width: 200px;
  inline-size: 200px;

  p {
    /* 이때 padding은 부모 요소의 width:200px을 상속해와서 10%처리 */
    padding: 10%;
    margin: 0;
    border: inherit;
    position: relative;
    /* 이때 inset-inline-start와 left는 부모 요소의 width:200px을 상속해와서 50%처리 */
    inset-inline-start: 50%;
    left: 50%;
    background-color: tomato;
  }
}

/* content-box : margin+border+padding+width */
/* border-box : margin+width(border+width) */

.static {
  background: yellowgreen;
}
.fixed {
  background: rgba(230, 230, 200, 0.4);
  /* position:fixed의 속성을 주게 되면 block 요소로 렌더링 됨 */
  /* float와의 차이점은 float는 텍스트 부분이 설정된 요소 아래로 올 수 없지만
    fixed는 아래에 text가 와도 무방하다 */
  position: fixed;
  inset-inline-end: 0;
  inset-block-end: 0;
}

.relative-wrapper {
  position: relative;
  background-color: grey;
}

.absolute-wrapper {
  position: absolute;
}

.absolute {
  background: sandybrown;
  position: absolute;
  inset-inline-start: 150px;
  inset-block-start: 0px;
}
/* absolute와 fixed의 차이점은 viewport에 고정이 되는 것에 있다
   absolute는 페이지 안에서 절대적인 위치에 존재하고 fixed는 상대적인 위치에 존재한다 */
/* absolute는 보통 relative와 함께 사용하며 relative의 왼쪽 위에서부터 위치 카운트를 한다 */
/* absolute의 부모는 static만 아니면 됨*/

.sticky {
  background-color: aquamarine;
  padding: 20px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-block: 100px;
  position: sticky;
  inset-block-start: 0;
}
/* sticky는 스크로를 내리면 행을 고정해서 보여준다 */