html의 위치를 ​​지정하는 방법에는 여러 가지가 있습니다.

html 위치 지정에는 다음이 포함됩니다. 1. 기본 위치 지정, 정적; 3. 절대 위치 지정, 절대 4. 혼합 상대 위치 지정 및 절대 위치 지정 5. 고정 위치 지정, 부동 .

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. static(기본값)

요소(예: p)에 대한 위치 지정 방법을 지정하지 않을 경우 기본값은 static이며, 이는 요소가 흐름 위치 지정에 따라 적절한 위치에 배치된다는 의미입니다. 문서의. 따라서 다양한 해상도에서 흐름 위치 지정을 사용하면 잘 적응할 수 있으며 상대적으로 좋은 레이아웃 효과를 얻을 수 있습니다.

일반적으로 현재 요소의 위치 지정 방법이 정적임을 지정할 필요가 없습니다. 이것이 기본 위치 지정 방법이기 때문입니다. 상위 요소에서 상속된 위치 지정 시스템을 재정의하려는 경우가 아니면

2. Relative(상대 위치 지정)

정적을 기반으로 요소를 원래 위치로 일부 조정(변위)하려는 경우 요소 위치를 상대 위치로 설정하고 상대 변위를 지정할 수 있습니다. (위, 아래, 왼쪽, 오른쪽 사용).

한 가지 주목해야 할 점은 상대적으로 배치된 요소가 더 이상 원래 위치에 있지 않더라도 여전히 문서 흐름에 있고 원래 차지했던 위치 공간을 계속 점유한다는 것입니다.

3. Absolute(절대 위치 지정)

문서의 지정된 위치에 요소를 배치하려면 절대를 사용하여 위치를 지정하고 요소의 위치를 ​​절대로 설정하고 top,bottom을 사용할 수 있습니다. , 왼쪽, 오른쪽 위치.

절대 위치 지정을 사용하면 문서 흐름에서 요소가 제거되어 원래 요소가 차지했던 공간이 다른 요소로 채워지게 됩니다.

4. 상대 위치와 절대 위치 혼합(상대 위치 지정과 절대 위치 혼합)

상대 요소가 상위 요소로 설정되고 절대 요소가 다음과 같이 하위 요소 중 하나로 설정된 경우:

<div id="parent" style="position:relative">
    <div id="child" style="position:absolute">
    </div>
</div>

하위 요소는 다음과 같습니다. 절대 위치 참조는 상위 요소입니다.

혼합 위치 지정을 사용하면 다음과 유사한 CSS를 사용하여 2열 위치 지정을 구현할 수 있습니다

#div-parent {
 position:relative;
}
#div-child-right {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-child-left {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

5.fixed(고정 위치 지정)

절대 위치 지정의 참조 개체는 "이전 위치 지정" 상위 요소라는 것을 알고 있습니다. (정적은 계산되지 않음)", 요소 위치 지정을 위한 참조가 항상 전체 문서(뷰포트)가 되도록 하려면 어떻게 해야 합니까?

답은 고정 위치 지정을 사용하는 것입니다. 고정 위치 지정의 참조 개체는 항상 현재 문서입니다. 고정 위치 지정을 사용하면 브라우저 문서의 왼쪽 상단, 오른쪽 상단 등에 p를 쉽게 배치할 수 있습니다. 예를 들어 정보 프롬프트 p를 추가하고 오른쪽 상단의 p를 수정하려면 다음 CSS

.element  { 
    position:fixed; 
    top:2%; right:2%;
 }

6, float(floating)

floating의 경우 알아야 할 사항은 다음과 같습니다. :

*플로팅은 문서 흐름에서 요소를 제거하고 해당 공간은 다른 요소로 채워집니다.

*플로팅 매개변수는 상위 요소이며 상위 요소의 컨테이너에서 부동합니다.

*플로팅 요소 뒤의 요소에 대한 플로팅의 영향을 없애기 위해 플로팅 요소 뒤에 p를 추가하고 이 p의 클리어를 둘 다로 설정합니다.

*두 요소가 모두 부동으로 설정된 경우 두 요소가 겹치지 않습니다. 첫 번째 요소는 특정 공간을 차지하고 두 번째 요소는 밀접하게 이어집니다. 두 번째 요소가 뒤따르는 것을 원하지 않으면 두 번째 부동 요소에 Clear를 사용할 수 있습니다.

7、reference

권장 학습: html 비디오 튜토리얼

위 내용은 html의 위치를 ​​지정하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!