CSS3 위치 지정에는 4가지 유형이 있습니다. 1. 상대(상대 위치), 오프셋 참조 요소는 요소 자체이므로 요소가 문서 흐름에서 벗어나지 않습니다. 2. 절대(절대 위치), 가장 가까운 위치; 상위 요소 중 요소는 참조 좌표로 사용됩니다. 3. 고정(고정 위치), 4. 정적(정적 위치).
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.
CSS 위치 지정에는 네 가지 유형이 있습니다. 위치 값은 정적, 상대, 절대, 고정
1 상대(상대 위치)
phaseoffset입니다. 위치 지정 참조 요소는 요소 자체이며 문서 흐름에서 해당 요소를 가져오지 않습니다. 요소의 초기 위치가 차지하는 공간은 유지됩니다. 상대적으로 배치된 요소는 절대적으로 배치된 요소의 상위 요소로 사용되는 경우가 많습니다. 그리고 배치된 요소는 종종 z-index 속성을 사용하여 계층적으로 등급이 지정됩니다
코드 예:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.rel{
width: 200px;
height:200px;
background: red;
position: relative;
top:200px;
left: 200px;
}
</style>
</head>
<body>
<p class="rel">相对定位</p>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>렌더링:
rel 요소가 편견을 생성하더라도 이동했지만 텍스트가 원래 위치를 채우지 않습니다. 상대적으로 배치된 요소가 문서 흐름에서 벗어나지 않고 원래 위치가 그대로 유지되는 것을 볼 수 있습니다.
2.절대(절대 위치 지정)
절대 위치 요소는 상위 요소에서 가장 가까운 위치 요소를 참조 좌표로 사용하고, 절대 요소의 상위 요소가 위치 지정 요소가 위치 지정을 사용하지 않으면 이 절대 위치 지정 요소의 참조 개체는 html이고 요소는 문서 흐름에서 분리됩니다. 마치 문서 스트림이 삭제된 것과 같습니다. 그리고 배치된 요소는 종종 Z-색인 속성을 사용하여 계층적으로 등급이 매겨집니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.abs{
width: 200px;
height:200px;
background: red;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div>绝对定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>렌더링:
여기서 소문을 없애겠습니다! 절대 위치 요소의 상위 요소가 위치 지정을 사용하지 않으면 이 절대 위치 요소의 참조 개체는 누구입니까? 어떤 사람은 본문이라고 하고 어떤 사람은 실제로 문서라고 합니다. MDN에서도 읽었습니다. 소개에서 는 초기 포함 블록을 참조로 사용합니다. 크기는 뷰포트와 일치하지만 뷰포트에 의해 생성되지 않고 루트 요소 에 의해 생성됩니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin:0px;
padding:0px;
}
body {
height:1500px;
}
div {
width:100px;
height:100px;
background:green;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>예제 렌더링:
참조 개체가 본문 또는 문서인 경우 p 요소는 페이지 하단에 있어야 합니다. 여기에 스크롤 막대가 있습니다. 요소는 뷰포트의 바닥에만 위치합니다.
3, fixed (fixed positioning)
변위의 기준 좌표는 시각적 창이며 고정 요소는 문서 흐름에서 벗어나는 데 사용됩니다. 그리고 배치된 요소는 종종 Z-색인 속성을 사용하여 계층적으로 등급이 지정됩니다.
인스턴스 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fix{
width:200px;
height: 200px;
background: red;
position: fixed;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div>固定定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>인스턴스 렌더링:
고정 고정 위치 지정과 절대 위치 지정은 둘 다 요소의 변위를 유발할 수 있습니다. 지금까지 절대 위치 지정과의 차이점을 확인하지 못했다면 다음을 추가할 수 있습니다. 기사 이 텍스트는 브라우저에 의해 생성된 스크롤 막대입니다. 스크롤 막대를 드래그하면 이름에서 알 수 있듯이 고정 위치 요소를 특정 위치에 고정할 수 있습니다. 절대 위치 지정은 스크롤 막대가 스크롤될 때 위치를 이동합니다.
4. 정적(정적 위치 지정)
기본값, 요소 상자는 정상적으로 생성되며 왼쪽 상단 오른쪽 하단 오프셋 속성은 정적 위치 지정의 일반 표시에 영향을 주지 않습니다. (동영상 공유 학습:css 동영상 튜토리얼)
위 내용은 CSS3 위치 지정에는 여러 유형이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
