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

div:not(#awebChromeHelper) {
  font-size: 3rem;
  border: 1px solid currentColor;
  padding: 10px;
}
/*요소 박스 위치 지정(percentage-value)*/
/*content-box 방식 : margin + border + padding + content*/
/*border-box 방식 : margin + width(border + padding)*/
.percentage-value {
  border: 1px solid currentColor;
  padding: 10px !important;
  margin: 1em !important;
  font-size: 1rem !important;
  inline-size: 200px;

  p {
    padding: 10%;
    margin: 0;
    border: inherit;
    position: relative;
    inset-inline-start: 50%;
    background-color: tomato;
  }
}
.static {
  background: yellow;
}
.fixed {
  background-color: hsla(250 50% 50% / 1);
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 0;
}
/* .absolute-wrapper {
  position: absolute;
} */
.relative-wrapper {
  position: relative;
  inset-block-start: 250px;
  inset-inline-end: 50px;
}
.absolute {
  position: absolute;
  background-color: sandybrown;
  inset-inline-start: 100px;
  inset-block-start: 0;
}
.sticky {
  background-color: aquamarine;
  padding: 20px;
  margin-block: 100px;
  position: sticky;
  inset-block-start: 0;
}