CSS로 div의 위치를 ​​변경하는 방법

css에서 position을 사용하여 div의 위치를 ​​변경할 수 있습니다. position 속성 값의 의미:

static: 요소 상자가 정상적으로 생성됩니다. 블록 수준 요소는 문서 흐름의 일부로 직사각형 상자를 만드는 반면, 인라인 요소는 상위 요소 내에 배치되는 하나 이상의 선 상자를 만듭니다.

상대적: 요소 상자가 특정 거리만큼 오프셋되어 있습니다. 요소는 위치가 지정되지 않은 모양과 원래 차지했던 공간을 유지합니다.

절대: 요소 상자가 문서 흐름에서 완전히 제거되고 포함 블록을 기준으로 배치됩니다. 포함 블록은 문서의 다른 요소일 수도 있고 초기 포함 블록일 수도 있습니다. 일반적인 문서 흐름에서 요소가 이전에 차지했던 공간은 해당 요소가 존재하지 않는 것처럼 닫힙니다. 요소는 원래 일반 흐름에서 생성된 상자 유형에 관계없이 위치 지정 후 블록 수준 상자를 생성합니다.

수정됨: 요소 상자는 위치를 절대값으로 설정하는 것처럼 동작하지만 포함 블록은 뷰포트 자체입니다.

팁: 요소의 위치는 일반 흐름의 위치에 상대적이므로 상대 위치 지정은 실제로 일반 흐름 위치 지정 모델의 일부로 간주됩니다.

실험 사례:

1. div의 위치 값을 설정하여 div의 위치를 ​​조정합니다. 간단한 코드 예는 다음과 같습니다.

body>
    <div id="div2"></div>
    <style>
        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: absolute;
            right: 200px;
            bottom: 200px;
        }
    </style>
</body>

2. 200픽셀, 거리가 200픽셀로 몸체 오른쪽이 200픽셀, 아래쪽이 200픽셀입니다.

위 내용은 CSS로 div의 위치를 ​​변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!