직위 속성은 무엇입니까?-CSS 튜토리얼-php.cn

직위 속성은 무엇입니까?

coldplay.xixi

풀어 주다： 2023-02-06 17:17:11

원래의

24674명이 탐색했습니다.

위치 속성은 다음과 같습니다. 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>

로그인 후 복사

직위 속성은 무엇입니까?