inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

반응형 웹사이트 포트폴리오(Architecture Agency)

포지션 속성에 관해서 질문드립니다

969

huni0149

작성한 질문수 14

1

position 속성에 관해서 궁금한게 있는데 혹시 한 클래스값에 포지션 요소를 중복해서 쓸수 있나요?

포지션 fixed를 준곳에 relative 속성을 줘서 여기를 기준으로 잡고 자식태그에 absolute를 주고싶습니다

만약 쓸 수있다면 어떤식으로 작성해야하나요 

ex) position:fixed; position:relative; 

position:fixed,relative;

반응형-웹 HTML/CSS jquery 웹 디자인

답변 1

1

코딩웍스(Coding Works)

당연히 포지션 속성은 하나의 선택자 안에서 중복할 수 없습니다.

만약 중복된다면 아래에 있는 것이 위에 있는 것을 덮어씁니다.

.box {
    positionrelative;
    positionfixed;
}
만약 위에 처럼 된다면 position: relative 는 position: fixed로 대체됩니다. 반대의 경우도 마찮가지구요.
부모요소에  position: relative, 자식요소에 absolute를 주어 부모자식 관계를 만드는게 기본적인 방법입니다.
다른 경우로는 자식요소에 absolute를 주고 부모요소에 relative를 주려고 했는데 이미 absolute 또는 fixed가 있으면 이미 둘은 부모자식 관계가 되어 있는 겁니다. 곧, 부모요소에 absolute 또는 fixed가 이미 있다면 relative를 주지 않아도 됩니다.

0

huni0149

답변 감사합니다.그러면 부모태그에 포지션 fixed나 absloute가 있는데 자식태그에 relative를 써도 될까요? relative의 자식태그에 absolute를 주고싶어서요.

최상단 fixed

자식 relative

자식의 자식 absolute 

0

코딩웍스(Coding Works)

position: relative를 준다고 아래의 2가지 경우를 제외하고 html요소가 어떤 변화를 갖는 것은 아닙니다.

첫번째, 부모자식 관계를 만들 때 부모요소에 position: relative 주기

두번째, 부모자식 관계없이 어떤 요소에 top, left, right, bottom, z-index 좌표값을 부여하기 위해 osition: relative 주기

=============

1) 최상단 fixed

2) 자식 relative

3) 자식의 자식 absolute 

3과 2는 부모자식 매칭 완료

2와 1은 부모자식 매칭 완료

3과 1은 부모자식 매칭과 관계 없음(3의 입장에서 2번에 relative 또는 absolute, fixed가 있으면 더 위로 올라가지 않고 부모자식 관계가 매칭됩니다.)

곧, 1번과 2번의 포지션 속성을 relative, absolute, fixed로 바꿔도 위의 부모자식 관계는 전혀 변하지 않습니다.

full reload 질문

1

178

3

섹션4에 있는 4번째 강의 질문(스크롤링)

1

148

2

안녕하세요. 질문있어서 조심스레 글을 올려봅니다.

1

197

1

브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ

1

317

3

css full reload 문제가 발생하여 질문드립니다!

1

315

3

파일 내 index.html에 대한 오류

1

264

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ

1

207

1

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다

0

218

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!

1

201

2

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.

1

255

3

크로스브라우징-크롬

1

280

2

섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..

0

256

1

line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다

1

217

1

슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다

1

274

1

이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?

1

257

1

모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역

1

508

2

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4

2

233

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3

2

308

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2

2

259

1

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태

2

423

1

포지션 속성 중복과 관련해서

1

213

1

section about에 관련.. 궁금해요

1

254

1

섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련

1

191

2

개발자도구

2

481

6