CSS의 위치 속성에 대한 자세한 설명

怪我咯
풀어 주다: 2017-06-22 09:16:17
원래의
1876명이 탐색했습니다.

CSS의 position 속성은 요소의 위치 지정 유형을 설정하는 것입니다. 여기에는 절대(absolute positioning), 상대(relative positioning), static(staticpositioning, 기본값), 고정이 포함됩니다. (고정 위치) ) 4개의 매개변수.

  • 정적: 기본값. 위치가 정적으로 설정된 요소는 항상 페이지 흐름에 의해 지정된 위치에 있습니다(정적 요소는 상단, 하단, 왼쪽 또는 오른쪽 선언을 무시합니다).

  • relative: 위치가 상대로 설정된 요소는 일반 위치를 기준으로 이동할 수 있으므로 "left:20"은 요소를 요소의 일반 위치에서 왼쪽으로 20픽셀 이동합니다.

  • 절대: 위치가 절대로 설정된 요소는 해당 요소를 포함하는 요소를 기준으로 지정된 좌표에 배치될 수 있습니다. 이 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정할 수 있습니다.

  • fixed: 위치가 고정으로 설정된 요소는 브라우저 창을 기준으로 지정된 좌표에 배치될 수 있습니다. 이 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정할 수 있습니다. 요소는 창이 스크롤되는지 여부에 관계없이 해당 위치에 유지됩니다. IE7(엄격 모드)에서 작동합니다.

위치 속성을 사용하여

요소의 위치를 ​​지정합니다. 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>
로그인 후 복사


위 내용은 CSS의 위치 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!