• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

position 질문

22.10.27 18:05 작성 조회수 196

1

선생님 안녕하세요.

햄버거 메뉴 만들 때

label에 position: relative

label span 에 position: absolute 이렇게 포지션값을 주었는데,

사이드바 만들면서

label의 position: relative 를 absolute로 바꿔주게 되는데

그럼 label span 의 position: absolute 의 relative는 무엇이 되는 건가요?? label의 포지션을 앱솔루트로 바꿨는데도, label span에는 영향이 없는 이유가 궁금합니다

label[for=trigger] {
  /* border: 1px solid red; */
  width: 30px;
  height: 20px;
  display: block;
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.5s;
}
label[for=trigger] span {
  position: absolute;
  height: 2px;
  background-color: #000;
  width: 100%;
  left: 0;
  transition: 0.3s;
}
/* sidebar */
.sidebar {
  background-color: #000;
  width: 300px;
  height: 100vh;
  position: fixed;
  right: -300px;
  transition: 0.5s;
}

 

답변 2

·

답변을 작성해보세요.

1

부모요소와 자식요소는 항상 포지션 속성으로 묶여야 합니다.
자식요소는 absolute, 부모요소는 relative
그런데 부모요소에 relative 대신에 absolute가 있어도 부모요소 자식요소는 어긋나지 않습니다.
이건 그냥 이렇게 된다고 생각하시면 됩니다. 굳이 이론적으로 이해하려고 하지 않으셔도 됩니다.
사실 저도 이 부분을 이론적으로 왜 그렇게 되는지를 알아서 하는건 아닙니다.

0

녜녜님의 프로필

녜녜

질문자

2022.10.28

네 알겠습니다! 답변감사드립니다!