• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

21.03.27 00:37 작성 조회수 629

1

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

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

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

ex) position:fixed; position:relative; 

position:fixed,relative;

course-thumbnail

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

답변 1

답변을 작성해보세요.

1

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.03.27

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

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

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

huni0149님의 프로필

huni0149

질문자

2021.03.27

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

최상단 fixed

자식 relative

자식의 자식 absolute 

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.03.27

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로 바꿔도 위의 부모자식 관계는 전혀 변하지 않습니다.

이 글과 비슷한 Q&A