[CSS] padding position 영역

[CSS] padding position 영역

• 조건

  • parent 요소에 padding을 주고 relative 해준다.
  • child는 absolute 일 때, 위치를 어떻게 잡아줄까?

 

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px; height: 200px;
  border: 1px solid #000;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}
.child {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  background: red;
}

parent의 padding을 무시하고 child는 top: 0; left: 0; 방향에 있게 된다.

• 방법

<div class="wrap">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

.wrap {
  width: 200px; height: 200px;
  border: 1px solid #000;
  padding: 20px;
  box-sizing: border-box;
}
.parent {
  width: 100%; height: 100%;
  background: pink;
  position: relative;
}
.child {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  background: red;
}