네 가지 위치 지정 모드: 정적, 상대, 절대, 고정
네 가지 위치 지정 위치: 왼쪽, 오른쪽, 위쪽, 아래쪽
위치 지정 속성: 위치, 거기 4개의 상태 값입니다
1.static: 정적 위치 지정, 문서 흐름의 요소 순서로 정렬, 기본값이며 4개의 위치는 유효하지 않습니다
#🎜🎜 #2. 상대: 상대 위치 지정, 요소는 문서 흐름의 원래 위치를 기준으로 위치 지정, 4개의 위치가 유효함 3.절대: 절대 위치 지정, 요소 위치 지정 상위 위치를 기준으로 위치 지정 , 문서 흐름 중 네 가지 위치가 유효합니다4.fixed: 절대 위치 지정 클래스와 유사한 고정 위치 지정도 문서 흐름에서 분리됩니다. 고정되어 페이지와 함께 스크롤되지 않습니다. 4개 위치는 유효합니다# 🎜🎜 #
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.固定定位</title>
<style>
body {
/*将页面高度设置为2000px,使之出现垂直滚动条*/
height:2000px;
}
.box {
width: 200px;
height: 260px;
/*background-color: #6CF;*/
/*固定定位fixed:元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动*/
/*可以当作是绝对定位的一个特例来看待*/
position:fixed;
top: 200px;
left:50px;
}
</style>
</head>
<body>
<!--<div></div>-->
<!--以在线QQ客服为例进行演示-->
<div><img src="../images/qq.png" alt="" width="200"></div>
</body>
</html>위 내용은 CSS 고정 위치 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
