위치 해석
- WBOY원래의
- 2016-09-08 08:29:161917검색
먼저 Position은 문자 그대로 위치를 의미하며 HTML에서 4가지 속성을 갖습니다. static은 정적이며 기본 효과는 특별한 설정이 없습니다. positioning은 계층적 분류를 할 수 없다고 규정합니다. z-index를 통해 수행됩니다.
절대(절대 위치 지정)
절대(절대 위치 지정)는 텍스트 흐름에서 벗어날 뿐만 아니라 텍스트 흐름에서 이 절대 위치 지정 요소를 위한 전용 공간을 남기지 않습니다. 마치 공장에서 한 사람이 떠나면 자연스럽게 다른 사람이 그 자리를 채우는 것과 같습니다. 자연스럽게 밖으로 나가는 부분은 자유체가 됩니다. 절대 위치 지정을 사용하면 TRBL(줄여서 TOP, RIGHT, BOTTOM, LEFT, TRBL)을 통해 요소가 원하는 위치에 있도록 설정할 수 있습니다. 상위 레이어의 위치 속성이 기본값인 경우 TRBL의 좌표 원점은 바디의 좌표 원점에서 시작됩니다.
상대적 위치 지정(relative positioning)은 텍스트 흐름에서 위치를 위, 아래, 왼쪽, 오른쪽으로만 이동할 수 있습니다. 비록 프레젠테이션 영역이 텍스트 흐름과 분리되어 있지만, 여전히 텍스트 흐름에 있습니다. 그를 위한 장소를 예약하세요. 이는 마치 이주노동자가 다른 곳으로 가는데도 고향에 여전히 그를 위한 전용 장소가 있고 이 장소는 그의 움직임에 따라 변하지 않는 것과 같습니다. 이렇게 하면 분명히 공백이 남게 됩니다. 텍스트 흐름에서 이 부분을 삭제하려면 절대 위치 지정을 사용해야 합니다.
고정(고정 위치 지정)
브라우저 창을 기준으로 위치가 지정된 고정 위치 지정 요소를 생성합니다.
요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
다음으로 '삼국지킬'의 예를 들어 포지션 적용에 대해 자세히 이야기하겠습니다.
< li id="c4">
& lt;/li & gt;
& lt;/ul & gt;
& lt;/lt;/div & gt;
& lt;/div & gt;
& lt ;/div>
< ;img src="image/vhongtao.png" class="k4"/>
囊