H5에서의 포지셔닝

이번에는 H5 포지셔닝에 대해 알려드리겠습니다. H5 포지셔닝의 주의사항은 무엇인가요?

1. 위치 지정 흐름 분류

1.1 상대 위치 지정
1.2절대 위치 지정
1.3고정 위치 지정
1.4정적 위치 지정

2. 상대 위치 지정은 표준 흐름에서 이전 위치를 기준으로 합니다. move

위치: 상대;

상대 위치 지정에 대한 주의 사항

1. 상대 위치 지정은 표준 흐름에서 벗어나지 않으며 계속해서 표준 흐름에서 공간을 차지합니다.

2. 상대 위치 지정에서는 같은 방향의 위치 지정 속성만 사용됩니다. 하나의 를 사용할 수 있습니다(즉, 왼쪽을 사용하면 오른쪽을 사용하지 않고 위쪽을 사용하면 아래쪽을 사용하지 않음)

3. 상대 위치 지정은 표준에서 벗어나지 않습니다. 따라서 상대 위치 지정에서는 블록 수준 요소/인라인 요소/인라인 블록 수준 요소를 구분합니다
4. 상대 위치 지정은 표준 흐름에서 벗어나지 않으며 상대적으로 위치 지정된 요소는 표준 흐름에서 위치를 차지하므로 상대 위치 지정 요소 여백/패딩 및 기타 속성은 표준 흐름의 레이아웃에 영향을 미칩니다.(여백/패딩은 위치 지정 전에 상자 위치에 추가됩니다)

상대 위치 지정 응용 시나리오

1 . 요소를 미세 조정하는 데 사용됩니다

2. 나중에 배우게 될 절대 위치 지정과 함께 사용하세요

       .box2{
            background-color: green;
            position: relative; //相对定位
            top: 20px;
            left: 20px;
            margin-top: 20px;//会加在定位之前的位置上
        }

3. 절대 위치 지정이란?

절대 위치 지정은 신체를 기준으로 한 위치 지정을 의미합니다.

위치: 절대;

주의 사항

1 절대 위치 지정 요소 표준 흐름을 벗어났습니다

2 절대 위치 지정 요소는 블록 수준 요소/인라인 요소/인라인 블록 수준 요소를 구분하지 않습니다

.box2{
            background-color: green;
            position: absolute; //绝对定位
            left: 0;
            bottom: 0; //在body的左下角
        }

4 절대 위치 지정 기준점

규칙

1. 기본적으로 절대 위치 지정 요소는 모두 조상 요소 유무에 관계없이 본문이 참조 지점으로 사용됩니다

2. 절대 위치 지정 요소에 조상 요소가 있고 조상 요소도 위치 지정 스트림인 경우, 그러면 절대 위치 지정 요소는 위치 지정 스트림의 조상 요소를 참조 지점으로 사용합니다

2.1 이 절대 위치 지정 요소의 조상 요소인 한 괜찮습니다

2.2 위치 지정 흐름은 절대 위치 지정/상대 위치 지정을 나타냅니다. /fixed positioning

2.3 위치 지정 흐름에서 정적 위치 지정만 작동하지 않습니다

3.절대적인 경우 위치 지정 요소가 조상 요소를 갖고 조상 요소도 위치 지정 흐름이고 조상에 여러 요소가 있는 경우 위치 지정 흐름 요소인 경우 이 절대 위치 지정 요소는 참조 지점으로 가장 가까운 위치 지정 흐름의 조상 요소를 사용합니다

5. 참고 사항

1. 절대 위치 지정 요소가 본문을 참조 지점으로 사용하는 경우 실제로는 전체 웹페이지의 너비와 높이가 아닌 웹페이지 첫 번째 화면의 너비와 높이를 기준으로 사용합니다.

이 글의 사례를 읽으신 후 이 방법을 익히셨으리라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

웹 페이지 레이아웃 방법 - 클리어 플로팅

HTML 및 CSS 상자 모델

위 내용은 H5에서의 포지셔닝의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!