스크롤하지 않고 CSS3 요소를 수정하는 방법-프런트엔드 Q&A-php.cn

스크롤하지 않고 CSS3 요소를 수정하는 방법

WBOY

풀어 주다： 2022-08-29 16:46:34

원래의

1267명이 탐색했습니다.

CSS3에서는 위치 속성을 사용하여 스크롤하지 않고 요소를 고정할 수 있습니다. 이 속성은 요소의 위치 지정 유형을 지정하는 데 사용됩니다. 속성 값을 고정으로 설정하면 요소의 위치가 상대적으로 고정됩니다. 스크롤 없이 달성할 수 있는 브라우저 창에 대한 구문은 "element {position:fixed;}"입니다.

스크롤하지 않고 CSS3 요소를 수정하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

스크롤하지 않고 CSS3 요소를 수정하는 방법

CSS에서는 위치 위치 지정 속성을 사용하여 페이지에서 div의 위치를 고정할 수 있습니다.

위치 속성은 요소의 위치 지정 유형을 지정합니다.

요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 위치를 지정할 수 있습니다. 그러나 위치 속성을 먼저 설정하지 않으면 이러한 속성이 작동하지 않습니다. 또한 위치 지정 방법에 따라 다르게 작동합니다.

고정 위치

요소의 위치는 브라우저 창을 기준으로 고정됩니다.

고정 위치 지정, 브라우저 생성을 기준으로 한 위치 지정, 위쪽, 오른쪽, 아래쪽, 왼쪽 네 가지 속성을 사용하여 브라우저 창을 기준으로 요소의 위치를 정의할 수 있습니다. 고정 위치 지정 요소를 사용하면 브라우저 창을 어떻게 스크롤하더라도 요소의 위치가 고정된 상태로 유지됩니다.

예제는 다음과 같습니다.

<html>
<head>
<style type="text/css">
div{
position:fixed;
left:5px;
top:5px;
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
    <div></div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><bbr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><brr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>sergsergsgs<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></><br/><br/>
</body>
</html>

로그인 후 복사

출력 결과:

스크롤하지 않고 CSS3 요소를 수정하는 방법