절대적으로 위치하는 요소와 상대적으로 위치하는 요소의 차이점과 연결-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

절대적으로 위치하는 요소와 상대적으로 위치하는 요소의 차이점과 연결

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 23, 2024 am 10:12 AM

절대 포지셔닝: 견적 요소 이동 및 레이아웃

절대적으로 위치하는 요소와 상대적으로 위치하는 요소의 차이점과 연결

절대 위치 요소와 상대 위치 요소의 차이와 연결에는 특정 코드 예제가 필요합니다.

HTML과 CSS에서는 요소의 위치와 레이아웃을 제어하기 위해 절대 위치 지정과 상대 위치 지정을 자주 사용합니다. 절대 위치 지정과 상대 위치 지정은 두 가지 일반적인 위치 지정 방법이며 실제 응용 분야에서는 서로 다른 특성과 용도를 갖습니다. 이 기사에서는 절대 위치 지정 요소와 상대적 위치 지정 요소 간의 차이점과 연결을 자세히 소개하고 독자가 이 두 가지 위치 지정 방법을 더 잘 이해하고 적용하는 데 도움이 되는 몇 가지 특정 코드 예제를 제공합니다.

1. 절대 위치 요소의 특징 및 용도

절대 위치 요소는 문서 흐름과 분리되어 공간을 차지하지 않습니다. 절대 위치 요소는 다른 요소에 영향을 주지 않으며 일반 문서 흐름과 분리됩니다. 다른 요소에는 영향을 미치지 않습니다. 따라서 절대 위치에 있는 요소는 다른 요소에 의해 제한되지 않고 페이지의 어느 위치에나 자유롭게 배치될 수 있습니다.
위쪽, 왼쪽, 오른쪽, 아래쪽 속성을 사용하여 위치 제어: 절대 위치에 있는 요소는 위쪽, 왼쪽, 오른쪽, 아래쪽 속성 값을 설정하여 페이지에서 특정 위치를 결정할 수 있습니다. 이러한 속성 값은 픽셀 값, 백분율 또는 음수 값일 수 있습니다.
가장 가까운 비정적으로 배치된 요소의 범위 내에서만 위치 지정: 절대적으로 배치된 요소의 최종 위치 지정은 가장 가까운 비정적으로 배치된(기본 위치가 아닌) 상위 요소를 기준으로 합니다. 일치하는 비정적으로 배치된 요소가 없으면 절대적으로 배치된 요소는 문서를 기반으로 배치됩니다.
절대 위치 요소는 다른 요소를 덮을 수 있습니다. 절대 위치 요소는 문서 흐름에서 벗어나므로 일반 요소 위에 겹쳐서 덮는 효과를 얻을 수 있습니다.

절대 위치 요소의 일반적인 적용 시나리오는 부동 메뉴, 팝업 상자 또는 특수 장식 효과를 만드는 것입니다.

다음은 절대 위치 지정 요소의 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div><!-- 绝对定位元素 -->
    <p>这是一个普通的段落</p>
</body>
</html>

로그인 후 복사

위 예에서 상자는 상단 및 왼쪽 속성을 설정하여 페이지 상단에서 100px, 페이지 상단에서 200px 위치에 배치됩니다. 페이지의 왼쪽.

2. 상대적으로 배치된 요소의 특성 및 용도

상대적으로 배치된 요소는 여전히 공간을 차지합니다. 상대적으로 배치된 요소는 여전히 페이지에서 공간을 차지하며 문서 흐름에서 벗어나지 않습니다. 다른 요소들은 상대적으로 배치된 요소의 원래 위치에 따라 배치됩니다. 상대적으로 배치된 요소가 이동하더라도 레이아웃은 영향을 받지 않습니다.
상단, 왼쪽, 오른쪽, 하단 속성을 사용하여 미세 조정: 상대적으로 배치된 요소도 상단, 왼쪽, 오른쪽, 하단 속성 값을 설정하여 미세 조정할 수 있습니다. 이러한 속성 값은 문서에서 요소의 원래 위치를 기준으로 계산됩니다.
자체 요소와 하위 요소에 적용: 상대 위치 지정 속성은 자체 요소와 포함된 하위 요소 모두에 적용됩니다. 상대적으로 배치된 요소의 위치를 참조하여 하위 요소의 위치를 지정할 수 있습니다.

상대적으로 배치된 요소는 일반적으로 특정 시나리오에서 보다 유연한 레이아웃을 달성하기 위해 요소의 위치를 미세 조정하는 데 사용됩니다.

다음은 상대적으로 배치된 요소에 대한 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"><!-- 相对定位元素 -->
        <p>这是一个相对定位元素内的段落</p>
    </div>
</body>
</html>

로그인 후 복사

위의 예에서 상자는 상대적으로 배치된 요소입니다. 위쪽 및 왼쪽 속성을 설정하여 해당 요소를 기준으로 20px 아래로 오른쪽으로 이동했습니다. 원래 위치는 50px입니다. 단락 요소도 상자를 기준으로 배치됩니다.

3. 절대 위치 지정 요소와 상대 위치 지정 요소 간의 연결

상대 위치 지정은 절대 위치 지정의 기초입니다. 상대 위치 지정은 절대 위치 지정의 특별한 형태입니다. 요소의 절대 위치를 설정하기 전에 일반적으로 상대 위치를 먼저 설정한 다음 특정 위치를 지정하려면 top 및 left와 같은 속성을 사용합니다.
절대 위치에 있는 요소와 상대 위치에 있는 요소가 동시에 존재할 수 있습니다. 절대 위치에 있는 요소와 상대 위치에 있는 요소가 같은 페이지에 동시에 존재할 수 있습니다. 그 사이의 레이아웃은 서로 간섭하지 않으며 페이지 내에서 자유롭게 배치할 수 있습니다.
Z-index 속성을 사용하여 요소의 스택 순서를 제어할 수 있습니다. z-index 속성의 값을 설정하면 절대 위치에 있는 요소와 상대적으로 위치에 있는 요소의 스택 순서를 제어하여 다음과 같은 폐색 효과를 얻을 수 있습니다. 다른 요소.

다음은 절대 위치 요소와 상대 위치 요소가 공존하는 경우의 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        #box1 {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        #box2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1"><!-- 相对定位元素 -->
        <div id="box2"></div><!-- 绝对定位元素 -->
    </div>
</body>
</html>

로그인 후 복사

위 예에서 box1은 상대 위치 요소로, top과 right를 설정하여 20px 아래로 이동하고 오른쪽으로 이동합니다. 왼쪽 속성을 50px 이동했습니다. box2는 절대 위치 지정 요소로 top 및 right 속성을 설정하여 box1의 오른쪽 상단에 배치됩니다.

실제 코드 예시를 통해 절대 위치에 있는 요소와 상대적으로 위치에 있는 요소의 차이점과 연관성을 더욱 명확하게 이해할 수 있습니다. 이 두 가지 위치 지정 방법의 특성과 사용법을 익히면 웹 페이지를 보다 유연하게 레이아웃하고 디자인하여 더 나은 시각적 효과를 얻을 수 있습니다.

위 내용은 절대적으로 위치하는 요소와 상대적으로 위치하는 요소의 차이점과 연결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.