직위 속성은 무엇입니까?
- coldplay.xixi원래의
- 2021-03-01 17:05:1224604검색
위치 속성은 다음과 같습니다. 1. 상대: 상대적으로 배치된 요소를 생성하고 일반 위치를 기준으로 배치하는 데 사용됩니다. 2. 절대, 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 요소를 생성하는 데 사용됩니다. 3. 고정. 브라우저 창을 기준으로 위치가 고정된 요소를 생성하는 데 사용됩니다. 4. 정적, 기본값, 위치 지정 없음, 요소가 일반 흐름에 나타납니다. 5. 끈적한, 사용자의 스크롤 위치를 기반으로 하는 끈적한 위치 지정에 사용됩니다.
이 튜토리얼의 운영 환경: windows10 시스템, CSS3 버전, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
위치 속성은 다음과 같습니다.
1. 위치: 상대 위치 지정
상대적으로 위치가 지정된 요소를 생성하고 일반 위치를 기준으로 위치를 지정합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.
1> 요소 자체의 특성에 영향을 주지 않습니다(블록 요소 또는 인라인 요소가 원래 특성을 유지하는지 여부).
2> 요소가 문서 흐름에서 벗어나지 않습니다(요소의 원래 위치는 위치가 변경되더라도 점유되지 않습니다. 새 위치)
3> 위치 지정 오프셋이 없으면 요소에 영향을 주지 않습니다(원래 위치에 대한 오프셋).
4> z-index 스타일은 위치 지정 요소의 계층 관계를 변경하는 데 사용할 수 있습니다. 이는 값이 클수록 위치 속성이 높은 요소에만 적용됩니다. 값은 상대, 절대 또는 고정입니다.) (둘 다 위치 지정 요소이며 후자는 이전 위치 지정을 덮어씁니다.)
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
2. 위치: 절대 위치 지정
은 절대 위치 지정 요소를 생성합니다. , 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치 지정됩니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
1> 요소를 문서 흐름에서 완전히 벗어나게 합니다(더 이상 문서 흐름에서 공간을 차지하지 않습니다).
2> 너비와 높이를 설정할 때 인라인 요소가 너비와 높이를 지원하도록 합니다(인라인 요소의 특성 변경).
3> 만들기 블록 요소의 너비가 설정되지 않은 경우 콘텐츠에 따라 너비가 늘어납니다(블록 요소의 특성 변경).
4> 위치가 지정되지 않은 경우 문서 - 페이지 문서 객체까지 레이어별로 검색됩니다.
5> 상대 위치 지정은 일반적으로 절대 위치 지정과 함께 사용됩니다(상위 요소를 기준으로 오프셋되도록 상위 요소를 상대 위치 지정으로 설정). )
6> 레벨 업그레이드(상대 위치 지정과 동일)
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
3. 위치: 고정; 고정 위치 지정
고정은 고정 위치 요소를 생성하고 브라우저 창을 기준으로 위치를 지정합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
4. 위치: 정적: 기본값
기본 레이아웃. 요소는 일반적인 흐름으로 나타납니다(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시).
5. 위치: 끈적 끈적한 위치 지정
사용자의 스크롤 위치를 기반으로 하는 끈적한 위치 지정입니다.
위치:상대적;처럼 동작하며 페이지가 대상 영역을 넘어 스크롤되면 위치:고정처럼 동작하고 대상 위치에 고정됩니다.
참고: Internet Explorer, Edge 15 및 이전 IE 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다.
관련 튜토리얼 권장 사항: CSS 비디오 튜토리얼
위 내용은 직위 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!