CSS 상대를 사용하는 방법은 무엇입니까? CSS의 상대 위치 지정 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

这是位于正常位置的标题

这个标题相对于其正常位置向左移动

这个标题相对于其正常位置向右移动

집

웹 프론트엔드

CSS 튜토리얼

CSS 상대를 사용하는 방법은 무엇입니까? CSS의 상대 위치 지정 사용법에 대한 자세한 설명

不言

Nov 05, 2018 pm 01:36 PM

CSS의 위치 속성에는 static(정적), 상대(상대), 고정(고정), 절대(절대)의 네 가지 속성 값이 있습니다. 오늘의 글에서는 CSS 상대 위치 지정 사용법을 소개하겠습니다. 더 이상 고민하지 않고 CSS에서 상대값을 사용하는 방법을 살펴보겠습니다.

먼저 상대 위치 지정의 개념을 간단히 살펴보겠습니다

W3C의 정의에 따르면 상대 위치 지정은 매우 이해하기 쉬운 개념임을 알 수 있습니다. 요소가 상대적으로 배치되면 해당 위치에 표시됩니다. 그런 다음 수직 또는 수평 위치를 설정하여 원점을 기준으로 요소를 이동할 수 있습니다.

즉, 상대 위치로 설정된 요소 상자는 일정 거리만큼 오프셋됩니다. 요소는 위치가 지정되지 않은 모양과 원래 차지했던 공간을 유지합니다.

CSS에서 상대 위치 지정의 개념을 읽은 후

relative의 사용법에 대해 자세히 이야기해 보겠습니다.

우리 모두는 CSS에서 다음과 같이 상대 위치 지정을 사용합니다. position:relative;

첫 번째 예를 살펴보겠습니다

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2 id="这是位于正常位置的标题">这是位于正常位置的标题</h2>
<h2 id="这个标题相对于其正常位置向左移动">这个标题相对于其正常位置向左移动</h2>
<h2 id="这个标题相对于其正常位置向右移动">这个标题相对于其正常位置向右移动</h2>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS 상대를 사용하는 방법은 무엇입니까? CSS의 상대 위치 지정 사용법에 대한 자세한 설명

위의 예를 읽고 나면 상대 위치 지정의 간단한 사용법을 알 수 있을 것입니다. 다음으로 상대 위치 지정의 다른 용도를 살펴보겠습니다.

절대에 대한 상대의 제한 효과

절대 위치 지정은 정적 속성이 아닌 첫 번째 조상 요소의 위치 지정 속성이라는 것을 알고 있습니다. 상대 또는 고정 위치 지정이 없으면 위쪽/왼쪽, 오른쪽을 추가합니다. /bottom과 같은 절대 속성은 오프셋될 수 있지만 position:relative가 상위 요소에 추가되면 절대 오프셋 기능은 상위 요소에 의해 제한됩니다.

오버플로에 대한 상대 효과의 제한 효과

예를 살펴보겠습니다.

<div class="box">
    <div class="son"></div></div>
    <div class="box" style="position: relative">
    <div class="son"></div></div>

로그인 후 복사

.box{
    overflow: hidden;
    width: 50px;
    height: 50px;
    background-color: #dddddd;
}
.son{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #cd0000;
}

로그인 후 복사

이 예에서 .box의 너비와 높이는 모두 50px이고 .son 요소의 너비와 높이는 다음과 같습니다. .box 요소는 Overflow:hidden으로 설정되어 있지만 여전히 .son 요소의 크기를 제한할 수는 없습니다. .box가 상대 위치 지정 속성으로 설정되면 너비와 높이가 모두 100px입니다. .son 요소의 높이는 50px 이 됩니다.

계층적 Z-색인에 대한 상대의 제한 효과

페이지의 두 절대값은 서로 다른 Z-색인을 가지며 자체 수준을 갖습니다. 이 두 절대값의 상위 클래스에 상대값이 있는 경우 해당 수준은 동일합니다. 상위 클래스의 상대 z-index에 있습니다.

위 내용은 이 기사의 전체 내용입니다. CSS의 상대적 위치 지정에 대한 자세한 내용은

css 동영상 튜토리얼을 참조하세요.

위 내용은 CSS 상대를 사용하는 방법은 무엇입니까? CSS의 상대 위치 지정 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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