CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

藏色散人

Oct 16, 2018 pm 01:44 PM

이 글에서는 주로 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 id="绝对定位-absolute">绝对定位（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 id="正常位置的元素">正常位置的元素</h3>
<h3 id="这个元素相对于其正常位置向左移动">这个元素相对于其正常位置向左移动</h3>
<h3 id="这个元素相对于其正常位置向右移动">这个元素相对于其正常位置向右移动</h3>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>本例中"left:-30px"，从元素的原始左侧位置减去 30 像素。</p>
<p>本例中"left:40px"，向元素的原始左侧位置增加 40 像素。</p>

</body>
</html>

효과는 다음과 같습니다:

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