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

div {
  padding: 10px;
  font-size: 3rem;
  border: 1px solid currentColor;
}

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

  p {
    padding: 10%;
    margin: 0;
    border: inherit;
    position: relative;
    background-color: tomato;
    left: 50%;
    inset-inline-start: 50%;
  }
}

.static {
  background: yellow;
}
.fixed {
  background: pink;
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 0;
}
.relative-wrapper {
  position: relative;
  inset-block-start: 250px;
  inset-inline-start: 50px;
}
.absolute-wrapper {
  position: absolute;
}
.absolute {
  width: 650px;
  inline-size: 650px;
  background: sandybrown;
  position: absolute;
  inset-inline-start: 100px;
  inset-block-start: 0;
}
.sticky {
  position: sticky;
  background-color: aquamarine;
  padding: 20px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-block: 100px;
  inset-block-start: 0;
}