CSS에서 정지 효과를 설정하는 방법
- 青灯夜游원래의
- 2021-05-06 18:15:1720580검색
CSS에서 정지 효과를 설정하는 방법: 먼저 요소에 "위치: 고정;" 스타일을 추가하여 요소가 페이지에서 정지되고 스크롤 막대에 따라 변경되지 않도록 요소의 위치를 고정합니다. 브라우저 창에서 위쪽, 아래쪽을 사용합니다. 왼쪽 및 오른쪽 속성은 요소의 부동 위치를 설정할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css 세트 서스펜션 효과(고정 위치)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>DIV悬浮示例-纯CSS实现</title>
<style type="text/css">
/*设置了高度，可以上下滚动*/
body {
height: 1800px;
background: #dddddd;
}
/*div通用样式*/
div {
background: #1a59b7;
color: #ffffff;
overflow: hidden;
z-index: 9999;
position: fixed; /*DIV悬浮(固定位置)*/
padding: 5px;
text-align: center;
width: 175px;
height: 22px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/*右上角*/
div.right_top {
right: 10px;
top: 10px;
}
/*右下角*/
div.right_bottom {
right: 10px;
bottom: 10px;
}
/*屏幕中间*/
div.center_ {
right: 45%;
top: 50%;
}
/*左上角*/
div.left_top {
left: 10px;
top: 10px;
}
/*左下角*/
div.left_bottom {
left: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="right_top"> 我是右上角悬浮的div</div>
<div class="right_bottom"> 我是右下角悬浮的div</div>
<div class="center_"> 我是屏幕中间悬浮的div</div>
<div class="left_top"> 我是左上角悬浮的div</div>
<div class="left_bottom"> 我是左下角悬浮的div</div>
</body>
</html>Rendering:
Description: 고정 위치(위치:fixed;)
fixed는 고정 위치 요소를 생성하며 해당 요소는 문서 흐름, 문서 흐름의 위치를 차지하지 않는다는 것은 문서 흐름 위에 떠 있고 브라우저 창을 기준으로 위치하는 것으로 이해될 수 있습니다.
요소의 레이어 모델에서 고정 위치를 설정하려면 위치:고정을 설정하고 브라우저 창을 위치 지정을 위한 참조로 직접 사용해야 하며 요소 위치는 그렇지 않습니다. 브라우저 창의 스크롤 막대를 사용하여 스크롤합니다. 화면에서 브라우저 창의 화면 위치를 이동하거나 브라우저 창의 표시 크기를 변경하지 않는 한 고정된 위치의 요소는 항상 브라우저 창 내의 보기 어딘가에 위치하며 문서의 흐름에 영향을 받지 않습니다.
예를 들어 텍스트가 한 화면의 너비를 초과하도록 긴 문자열을 준비한다면 플로팅 요소 div1의 왼쪽과 위쪽을 100px로 설정하고 플로팅 요소의 위치인 브라우저의 스크롤 막대를 드래그합니다. div1은 변경되지 않습니다.
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS에서 정지 효과를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!