inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 02(애니메이션 사이드메뉴 만들기)

position 질문

해결된 질문

349

녜녜

작성한 질문수 1

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;
}

 

jquery HTML/CSS

답변 2

1

코딩웍스(Coding Works)

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

0

녜녜

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

class 값 한 번에 부여하는법

2

80

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

69

1

div#css-checker-widget의 해결방

1

60

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

79

2

강의듣는법

1

74

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

68

2

input checked 질문합니다.

0

77

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

140

2

Part 1 영상 안나옵니다

1

90

1

제이쿼리 작동이 안됩니다

1

199

3

강의 내용 질문있습니다.

1

120

2

일정 부분만 주석하는 방법

1

211

2

폰트어썸

1

134

2

인접선택자에 대한 질문드립니다!

1

129

2

delay 적용 안됨

1

135

1

rotateY(360deg)가 적용이 안됩니다!

1

186

2

세로이동할때 height값

1

139

2

폰트어썸이 안되요..

1

487

2

화면 정중앙에 오게끔 할수있나요?

1

169

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

230

2

넷플릭스 어코디언 예제 질문

1

105

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

158

1

active 관련 질문

1

147

2