이 속성 값을 절대로 설정하면, 주변 콘텐츠 배치와 상관없이 객체가 일반적인 문서 흐름의 절대 위치에서 벗어나게 됩니다. 서로 다른 z-인덱스 특성을 가진 다른 객체들이 이미 특정 위치를 차지하고 있다면, 서로 영향을 주지 않고 같은 위치에서 겹칩니다. 객체는 외부 패치(여백)가 없지만, 여전히 내부 패치(토핑)와 테두리(테두리)가 있습니다.
객체의 절대 위치를 활성화하려면 왼쪽, 오른쪽, 위, 아래 속성 중 적어도 하나를 지정하고 이 속성 값을 절대로 설정해야 합니다. 그렇지 않으면 위 속성들은 기본값 값을 자동으로 사용하므로, 객체는 일반적인 HTML 레이아웃 규칙을 따르고 이전 객체 바로 다음에 렌더링됩니다.
TRBL 속성(TOP, RIGHT, BOTTOM, LEFT)은 위치 속성이 설정되어 있을 때만 유효합니다.
position:absolute를 설정해야 합니다
만약 부모(무한)가 위치 속성을 설정하지 않는다면, 현재 절대값과 TRBL 속성이 브라우저 왼쪽 상단의 원래 점으로 배치됩니다
부모(무한)가 위치 속성을 설정한다면, 현재 절대는 부모(최근)의 왼쪽 상단 모서리에 현재 절대가 결합되어 원래 점으로 위치합니다.
위치 설정 시: 상대
부모(최근 ) 콘텐츠 영역의 왼쪽 상단은 원래 점과 TRBL 속성(또는 부모 콘텐츠 영역 내 위치한 요소의 이전 요소에 대한 오프셋)을 결합한 지점이며, BODY의 왼쪽 상단은 부모가 없는 원래 지점입니다. 상대적 위치는 겹칠 수 없습니다. 상대 위치 측정을 사용할 때, 원소는 이동 여부와 상관없이 원래 공간을 차지합니다. 따라서 요소를 이동하면 다른 박스들이 덮어쓰게 됩니다.
일반적으로 웹페이지가 중앙에 있으면 Absolute를 사용할 때 실수를 하기 쉽습니다. 왜냐하면 웹페이지가 해상도 크기에 따라 자동으로 적응했기 때문인데, Absolute는 브라우저의 왼쪽 상단을 원래 점으로 사용하며 해상도 변경으로 인해 위치가 변하지 않기 때문입니다. 때로는 용기의 상하 관계를 설정하기 위해 z-지수에 의존해야 하며, 값이 클수록 상단이 높으며, 수치 범위는 자연수입니다. 물론, 한 가지 주목할 점은 부모-자식 관계는 z-인덱스로 설정할 수 없으며, 자식 수준은 부모 수준 위아래에 있어야 한다는 것입니다.
이 속성 값을 상대로 설정하면 객체가 일반 HTML 흐름에 머무르지만, 이전 객체에 따라 위치를 오프셋할 수 있습니다. 상대 위치 추적자를 따르는 텍스트나 객체는 위치하는 객체의 자연스러운 공간을 덮지 않고 자체 공간을 차지합니다. 반면, 절대 위치 객체 뒤의 텍스트나 객체는 대상 객체가 정상적인 문서 흐름에서 멀어지기 전에 자연스러운 공간을 차지합니다. 절대 위치 오브젝트를 뷰포트 밖에 두면 스크롤바가 나타납니다. 상대적 위치 표시 객체를 시청 영역 밖에 두는 것은 스크롤바를 사용할 때 나타나지 않습니다. 사실 포지셔닝의 가장 큰 문제는 각 포지셔닝의 의미를 기억하는 것입니다. 상대 위치는 문서 흐름에 대해 요소의 초기 위치이며, 절대 위치는 가장 최근 요소에 대해 "상대적으로" 위치된 조상 요소입니다.
다음은 추가 내용입니다:
CSS의 절대 위치(절대적)와 상대적 위치는 알고 있지만, 관련 효과를 직접 작성해본 적은 없습니다!
반나절 이상 작업하면 완성된 것으로 볼 수 있습니다! 이 두 가지 속성 중 일부도 알아냈어요!
요약은 다음과 같습니다:
먼저 다음 층 구조를 살펴보겠습니다
<body>
<div id=posi>
<div id=rel> 이 계층은 position:relative만 적용합니다; 스타일 </div>
<div id=abs> 이 레이어는 position:absolute만 적용합니다; 스타일 </div>
<div id=sss>는 스타일을 적용하지 않습니다 <div>
</div>
</body>
1. 절대적: 자리를 차지하지 않고, 친척: 자리를 가진다!
예를 들어 상부 구조물:
id rel이 있는 레이어는 표시 시 한 줄만 차지합니다! 그 뒤에 있는 ABS 레이어는 다음 라인에만 나타납니다!
ID ABS가 표시된 레이어가 보이면, 뒤에 있는 SSS ID와 겹칩니다!
2. 기본값(top과 함께 위치하지 않은) 절대(절대 위치)는 부모 계층에 의해 결정됩니다
예를 들어, 위 계층이 ABS라면, TOP과 함께 위치하지 않으면 그 표시 위치는 부모 POSI 레이어와 함께 됩니다(POSI는 문서의 왼쪽 아래 모서리에 위치하며, 왼쪽 하단에도 위치합니다)
3. 상단, 하단, 오른쪽, 왼쪽 및 기타 속성을 결합할 때, 절대(절대 위치)는 창을 위치로 하고, 상대 위치는 자신의 점유 위치로 오프셋되어 기준선으로 사용된다! 다음과 같습니다:
<body>
<div id=posi>
<div id=sss>는 스타일을 적용하지 않습니다 <div>
<div id=rel> 이 계층은 position:relative를 적용합니다; 하단: 30px; 스타일 </div>
<div id=abs> 이 레이어는 position:absolute만 적용합니다; 하단: 30px; 스타일 </div>
</div>
</body>
위 코드:
id rel을 가진 계층은 위로 이동하며 id SSS를 가진 계층과 겹칩니다
ID ABS가 있는 레이어는 창에서 30픽셀 떨어진 위치로 이동하며, 창을 기준선으로 삼게 됩니다!
4. 상단, 하단, 오른쪽, 왼쪽 등 여러 속성을 결합할 때, 절대(절대 위치)로 부모 레이어를 위치 기준선으로 사용하려면 절대 속성이나 상대 속성을 부모 레이어에 적용할 수 있습니다! 다음과 같습니다:
<body>
<div id=posi style="position:relative">
<div id=rel> 이 계층은 position:relative를 적용합니다; 하단: 30px; 스타일 </div>
<div id=abs> 이 레이어는 position:absolute만 적용합니다; 하단: 30px; 스타일 </div>
</div>
</body>
위 코드: id는 posi의 층이며, 절대 속성도 사용할 수 있습니다!
id는 영향을 받지 않는 rel의 레이어이며, 자체 플레이스홀더가 기준선으로 오프셋됩니다!
ID가 ABS인 레이어는 POSI 레이어의 하단 가장자리를 위치 기준선으로 삼고 있습니다. 만약 이 시점에서 POSI 레이어의 높이가 30px 미만이라면, ABS 레이어가 이를 인식하지 못할 수도 있습니다!
|
게시됨 2014. 10. 30. 오후 2:39:28
|
|
|
