[CSS] 자식 요소의 위치 변경

부모 요소가 자식요소를 감싸고 있을 때,

부모 요소에 position : relative 속성을 부여하고,

자식 요소에 position : absolute 속성을 부여하면 

top, left, right, bottom 등을 사용해 절대 위치를 부여할 수 있다.

 

 

나 같은 경우에는 오른쪽에 노란색으로된 링크를 누르면

등록 버튼이 생기는데 등록버튼이 링크 바로 밑에 붙어서 생기는 문제가 있었다.

 

 

 

하단에 고정된 모습이다. 

 

.whole-sale-page {
  background-color:  white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 320px;
  width: 100%;
  max-width: 540px;
  height : 75vh;
  position: relative; 
  margin-left : 10vw;

}

 

부모 요소에 position : relative를 부여하고,

 

.register-code-button {
  position: absolute;
  bottom: 20px; 
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 480px;
  background-color: #1c283c !important;
  color: white !important;
  border: none;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

 

자식요소에 position : absolute 를 부여한뒤,

bottom : 20px => 즉, margin-bottom이 20px인 위치에

자식요소를 고정시켰다.