CSS 박스 모델의 위치 지정에 대한 자세한 분석

cssBox 모델Positioning

1, Static Positioning

HTML 요소 의 기본값은 위치 지정이 없고 요소가 일반 흐름으로 나타나는 것입니다.
정적 위치 지정 요소는 top, bottom, left, right의 영향을 받지 않습니다.

2. 고정 위치

요소의 위치는 브라우저 창을 기준으로 고정된 위치입니다.
창을 스크롤해도 움직이지 않습니다.

고정 위치 지정은 문서 흐름과 독립적으로 요소를 배치하므로 공간을 차지하지 않습니다.
고정 위치 요소는 다른 요소와 겹칩니다.

3. 상대 위치 지정

상대적으로 배치된 요소의 위치 지정은 일반 위치를 기준으로 합니다.

상대적으로 배치된 요소와 서로 겹치는 요소의 내용은 이동할 수 있으며, 원래 차지하는 공간은 변경되지 않습니다.

상대적으로 위치된 요소는 절대적으로 위치된 요소에 대한 컨테이너 블록으로 사용되는 경우가 많습니다.

4. 절대 위치 지정

절대 위치에 있는 요소의 위치는 가장 가까운 위치에 있는 상위 요소를 기준으로 합니다. 요소에 위치가 지정된 상위 요소가 없으면 해당 위치는 다음과 같습니다. 기준:

절대적인 위치 지정은 문서 흐름과 독립적으로 요소를 배치하므로 공간을 차지하지 않습니다.
절대적으로 배치된 요소는 다른 요소와 겹칩니다.

겹치는 요소
요소는 문서 흐름과 독립적으로 배치되므로 페이지z-index
의 다른 요소를 오버레이할 수 있습니다. 속성은 요소의 스택 순서를 지정합니다(요소가 앞 또는 뒤에 있어야 함)
요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.
더 높은 스택 순서를 가진 요소는 항상 낮은 쌓임 순서 요소의 앞.
참고: 배치된 두 요소가 겹치고 Z-색인이 지정되지 않은 경우 HTML 코드에서 마지막으로 배치된 요소가 먼저 표시됩니다.

상대 위치 지정과 절대 위치 지정의 차이

절대 위치 지정(절대):
1 이 위치 지정 방법 에 할당된 개체는 문서 흐름 밖으로 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 사용하여 위치 지정 설정이 가장 많은 가장 가까운 상위 개체를 기준으로 절대 위치 지정을 수행합니다. 개체의 상위 개체가 위치 지정 특성을 설정하지 않은 경우 여전히 HTML 위치 지정을 따릅니다. 일반 경우 본문 개체의 왼쪽 상단을 기준으로 위치가 지정됩니다.
2. 절대 위치에 있는 객체는 쌓을 수 있으며, z-index 속성을 통해 쌓는 순서를 제어할 수 있습니다. z-index 값은 단위가 없으며 더 큰 값이 위에 오게 됩니다. 음수 값을 갖습니다. 가장 가까운 비표준 하천 위치에 상대적으로 원래 위치는 사라지고 다음 위치로 대체됩니다.
상대 위치(relative positioning):

원래 위치에 상대적이지만 원래 위치는 여전히 유지됩니다.

개체는 쌓일 수 없으며 왼쪽, 오른쪽, 위쪽, 아래쪽 등과 같은 속성을 기반으로 일반 문서 흐름에서 오프셋됩니다.
z-index 계층적 디자인을 사용할 수도 있습니다.

[튜토리얼] CSS 상자 모드 4(절대 위치 및 상대 위치)를 철저히 이해합니다

예:

<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*多个标签同时设置，使用逗号分隔*/
        body, p, ul, li, img, a {
            margin: 0;
            padding: 0;
        }

        /*给定图片尺寸：否则会超出父容器，堆叠在一起*/
        img {
            width: 100%;
            height: 100%
        }

        /*让a标签绝对于li标签，li要设置relative*/
        li {
            list-style: none;
            position: relative;
            float: left;
            padding: 1%;
            width: 18%;
        }

        /*让删除红叉处于li的右上角，且需给定大小*/
        a {
            background: url(images/close.png);
            width: 16px;
            height: 16px;
            position: absolute;
            top: 0;
            right: 0;
        }</style>

렌더링:

위 내용은 CSS 박스 모델의 위치 지정에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!