CSS에서 위치 속성의 용도는 무엇입니까?-CSS 튜토리얼-php.cn

CSS에서 위치 속성의 용도는 무엇입니까?

위치 속성

위치 속성은 요소에 사용되는 위치 지정 방법 유형(정적, 상대, 고정, 절대 또는 고정)을 지정합니다. 다섯 가지 값이 있습니다.

•static
•relative
•fixed
•absolute
•sticky

그런 다음 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 요소를 배치합니다. 그러나 이러한 속성은 위치 속성을 먼저 설정하지 않으면 아무런 효과가 없습니다. 또한 포지션 값에 따라 다르게 작동합니다.

position:static;

기본적으로 HTML 요소는 정적으로 배치됩니다. 정적 위치 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을 받지 않습니다. position:static 요소는 특별한 방식으로 배치되지 않습니다. 항상 페이지의 일반적인 흐름에 따라 배치됩니다.

(권장 튜토리얼: CSS 시작 튜토리얼)

이

static;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css</title>
    <style>
        div.static {
            position: static;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position: static;</h2>
<p>一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：</p>
<div class="static">
    这个div元素的位置为：static;
</div>
</body>
</html>

로그인 후 복사

position:relative;

position:relative; 요소는 일반 위치를 기준으로 배치됩니다. 상대적으로 위치가 지정된 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 설정하면 해당 요소가 일반 위치에서 멀어지게 조정됩니다. 다른 콘텐츠는 요소가 남긴 공백에 맞게 조정되지 않습니다.

이

요소 위치:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css</title>
    <style>
        div.relative {
            position: relative;
            left: 30px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position: relative;</h2>
<p>position:relative的元素; 相对于其正常位置定位：</p>
<div class="relative">
    这个div元素有position: relative;
</div>
</body>
</html>

로그인 후 복사

위치: 고정;

요소 위치: 고정됨. 즉, 페이지가 스크롤되더라도 항상 같은 위치에 유지됩니다. . 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성은 요소의 위치를 지정하는 데 사용됩니다. 고정 요소는 페이지에 일반적으로 있는 위치에 공백을 남기지 않습니다. 페이지 오른쪽 하단에 있는 고정 요소를 확인하세요.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css教程（jc2182.com）</title>
    <style>
        div.fixed {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 300px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position:fixed;</h2>
<p>position:fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置：</p>
<div class="fixed">
    这个div元素有position: fixed;
</div>
</body>
</html>

로그인 후 복사

position:absolute;

position:absolute; 요소는 가장 최근에 배치된 상위 요소를 기준으로 배치됩니다(고정처럼 뷰포트를 기준으로 배치되지 않음). 그러나 절대 위치 지정 요소에 위치 지정 상위 요소가 없으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동합니다. 참고: "위치 지정" 요소의 위치는 정적 요소를 제외한 모든 요소입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css教程（jc2182.com）</title>
    <style>
        div.relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #73AD21;
        }
        div.absolute {
            position: absolute;
            top: 80px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position: absolute;</h2>
<p>position:absolute;的元素; 相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）：</p>
<div class="relative">这个div元素有 position: relative;
    <div class="absolute">这个div元素有 position: absolute;</div>
</div>
</body>
</html>

로그인 후 복사

position:sticky;

position:sticky;사용자의 스크롤 위치에 따라 요소의 위치를 지정합니다. 고정 요소는 스크롤 위치에 따라 상대 요소와 고정 요소 간에 전환됩니다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적으로 배치됩니다. 그런 다음 위치에 "고정"됩니다(위치:고정에서와 같이).

참고: Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다(아래 예 참조). 또한 고정 위치 지정이 작동하려면 위쪽, 오른쪽, 아래쪽 또는 왼쪽 중 하나 이상을 지정해야 합니다.

이 예에서는 top: 0 스크롤 위치에 도달하면 고정 요소가 페이지 상단에 달라붙습니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
        }
    </style>
</head>
<body>
<p>尝试在此框架内<b>滚动</b>以了解粘性定位的工作原理。</p>
<p>注意：IE/Edge15及更早版本不支position: sticky;。</p>
<div class="sticky">我很粘!</div>
<div style="padding-bottom:2000px">
    <p>在此示例中，当您到达其滚动位置时，粘性元素会粘到页面顶部（顶部：0）。</p>
    <p>向上滚动以消除粘性。</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>

로그인 후 복사

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS에서 위치 속성의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!