CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)
- 藏色散人원래의
- 2018-10-16 13:44:258560검색
이 글에서는 주로 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>코드 효과는 다음과 같습니다:
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>코드 효과는 다음과 같습니다.
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>효과는 다음과 같습니다:
4, static
기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.
5.inherit
는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
이 글은 CSS의 위치 속성에 대한 관련 지식을 요약한 것입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
프런트엔드 관련 지식을 더 알고 싶으시면 PHP 중국어 웹사이트 css 동영상 튜토리얼, Bootstrap 튜토리얼 및 기타 관련 프론트엔드 튜토리얼을 따라가실 수 있습니다. 누구나 배우고 참고하실 수 있습니다!
위 내용은 CSS에서 위치는 무엇을 의미합니까? 그 가치와 기능은 무엇입니까? (요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!