인프런 커뮤니티 질문&답변
작성한 질문수
포지션 속성에 관해서 질문드립니다
작성
·
938
답변 1
1
코딩웍스(Coding Works)
지식공유자
당연히 포지션 속성은 하나의 선택자 안에서 중복할 수 없습니다.
만약 중복된다면 아래에 있는 것이 위에 있는 것을 덮어씁니다.
.box {
position: relative;
position: fixed;
}
만약 위에 처럼 된다면 position: relative 는 position: fixed로 대체됩니다. 반대의 경우도 마찮가지구요.
부모요소에 position: relative, 자식요소에 absolute를 주어 부모자식 관계를 만드는게 기본적인 방법입니다.
다른 경우로는 자식요소에 absolute를 주고 부모요소에 relative를 주려고 했는데 이미 absolute 또는 fixed가 있으면 이미 둘은 부모자식 관계가 되어 있는 겁니다. 곧, 부모요소에 absolute 또는 fixed가 이미 있다면 relative를 주지 않아도 됩니다.
코딩웍스(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로 바꿔도 위의 부모자식 관계는 전혀 변하지 않습니다.
답변 감사합니다.그러면 부모태그에 포지션 fixed나 absloute가 있는데 자식태그에 relative를 써도 될까요? relative의 자식태그에 absolute를 주고싶어서요.
최상단 fixed
자식 relative
자식의 자식 absolute