>  기사  >  웹 프론트엔드  >  CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)

CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)

藏色散人
藏色散人원래의
2018-10-16 13:44:258567검색

이 글에서는 주로 css에서의 위치의 의미모든 값기능을 소개합니다.

프론트엔드 개발을 배우는 사람들에게는 css의 position 속성이 중요합니다. 간단히 말해서 CSS에서 위치는 요소의 위치 지정 유형을 지정하는 것을 의미합니다.

그럼 위치의 속성값은 무엇인가요? 즉, css의 위치 지정 유형은 무엇입니까?

아래에서는 간단한 코드 예제를 사용하여 위치의 가치와 그 기능을 요약하고 소개하겠습니다.

1. Absolute

는 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정되는 절대 위치 지정을 사용하여 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

코드 예:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>absolute使用示例</title>
<head>
    <style>
        h3.abs
        {
            position:absolute;
            left:50px;
            top:50px
        }
 </style>
</head>
<body>
<h3 class="abs">绝对定位(absolute)</h3>
<p>通过绝对定位,元素可以放置到页面上的任何位置。本例中下面元素距离页面左侧和顶部都是50px。</p>
</body>
</html>

코드 효과는 다음과 같습니다:

CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)

2,fixed

절대 위치에 있는 요소를 생성하고 브라우저 창을 기준으로 위치를 지정합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

코드 예:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>fixed使用示例</title>
<head>
    <style>
        p.a1
        {
            position:fixed;
            left:10px;
            top:10px;
        }
        p.a2
        {
            position:fixed;
            top:50px;
            right:50px;
        }
 </style>
</head>
<body>
<p class="a1">fixed示例:此段元素相对于浏览器窗口,距离顶部10px,距离左边10px;</p>
<p class="a2">fixed示例:此段元素相对于浏览器窗口,距离顶部50px,距离右边50px;</p>
</body>
</html>

코드 효과는 다음과 같습니다.

CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)

3,relative

정상 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

코드 사용 예:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>relative</title>
<head>
    <style>
        h3.le
        {
            position:relative;
            left:-30px
        }
        h3.ri
        {
            position:relative;
            left:40px
        }
 </style>
</head>
<body>
<h3>正常位置的元素</h3>
<h3 class="le">这个元素相对于其正常位置向左移动</h3>
<h3 class="ri">这个元素相对于其正常位置向右移动</h3>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>本例中"left:-30px",从元素的原始左侧位置减去 30 像素。</p>
<p>本例中"left:40px",向元素的原始左侧位置增加 40 像素。</p>

</body>
</html>

효과는 다음과 같습니다:

CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)

4, static

기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.

5.inherit

는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

이 글은 CSS의 위치 속성에 대한 관련 지식을 요약한 것입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

프런트엔드 관련 지식을 더 알고 싶으시면 PHP 중국어 웹사이트 css 동영상 튜토리얼, Bootstrap 튜토리얼 및 기타 관련 프론트엔드 튜토리얼을 따라가실 수 있습니다. 누구나 배우고 참고하실 수 있습니다!

위 내용은 CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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