CSS의 고정 위치 지정에 대한 자세한 분석-CSS 튜토리얼-php.cn

CSS의 고정 위치 지정에 대한 자세한 분석

WBOY

풀어 주다： 2023-12-28 10:59:31

원래의

1311명이 탐색했습니다.

CSS의 고정 위치 지정에 대한 자세한 분석

CSS에서 고정 위치 지정의 위치 지정 속성에 대한 자세한 설명

CSS에서 고정 위치 지정(fixed positioning)은 일반적으로 사용되는 위치 지정 방법으로, 스크롤하지 않고도 브라우저 창의 특정 위치를 기준으로 요소를 배치할 수 있습니다. 페이지와 위치를 변경합니다. 이 글에서는 고정 위치 지정의 위치 지정 속성을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

고정 위치 지정에는 위쪽과 왼쪽이라는 두 가지 위치 지정 속성이 있습니다. 브라우저 창의 왼쪽 상단을 기준으로 요소의 위치를 결정하는 데 사용됩니다.

top 속성: 브라우저 창의 상단 가장자리를 기준으로 요소의 위치를 정의하는 데 사용됩니다. 픽셀 값, 백분율 값 또는 em 값을 사용할 수 있습니다. 다음은 샘플 코드입니다.

#fixed-element {
    position: fixed;
    top: 20px;
    left: 50%;
}

로그인 후 복사

위 코드에서 ID가 "fixed-element"인 요소는 고정 위치로 설정되고 브라우저 창의 상단 가장자리에서 20픽셀 떨어져 있으며 수평 중앙에 위치합니다.

left 속성: 브라우저 창의 왼쪽 가장자리를 기준으로 요소의 위치를 정의하는 데 사용됩니다. 픽셀 값, 백분율 값 또는 em 값을 사용할 수도 있습니다. 다음은 샘플 코드입니다.

#fixed-element {
    position: fixed;
    top: 20px;
    left: 50%;
}

로그인 후 복사

위 코드에서 요소의 왼쪽 속성은 50%로 설정됩니다. 이는 브라우저 창의 왼쪽 가장자리를 기준으로 요소의 위치가 창 너비의 절반이라는 의미입니다. 브라우저 창.

고정 위치 요소의 너비(너비) 및 높이(높이) 속성이 설정되지 않은 경우 해당 요소의 너비는 기본값으로 자동으로 설정되고 높이도 자동으로 계산됩니다.

상단 및 왼쪽 속성 외에도 오른쪽 및 하단 속성을 사용하여 고정 위치 지정을 배치할 수도 있습니다. 상단 및 왼쪽과 동일한 방식으로 사용되며 참조 모서리만 다릅니다. right 속성은 브라우저 창의 오른쪽 가장자리를 기준으로 요소의 위치를 정의하는 데 사용되고, Bottom 속성은 브라우저 창의 아래쪽 가장자리를 기준으로 요소의 위치를 정의하는 데 사용됩니다.

완전한 고정 위치 지정 예제 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
#fixed-element {
    position: fixed;
    top: 20px;
    left: 50%;
    background-color: #f1f1f1;
    padding: 20px;
}
</style>
</head>
<body>

<p>Scroll down to see the effect of fixed positioning.</p>

<div id="fixed-element">
    <h2>This is a fixed element</h2>
    <p>This element will stay in its position even when scrolling.</p>
</div>

</body>
</html>

로그인 후 복사

위 코드에서 p 요소 뒤의 div 요소는 고정 위치 지정으로 설정되었으며 브라우저 창 상단 가장자리로부터의 거리는 가로 중앙에 20픽셀입니다. 배경색은 #f1f1f1이고 패딩은 20픽셀입니다.

이러한 고정 위치 지정 속성을 학습하면 페이지 스크롤 시 고정 위치를 유지하도록 웹 페이지를 디자인할 때 요소를 보다 유연하게 배치하고 레이아웃할 수 있습니다. 동시에 다른 CSS 속성과 기술을 결합하여 더 많은 위치 지정 효과를 얻을 수도 있습니다.

이 글이 여러분에게 도움이 되기를 바라며, 향후 페이지 디자인에서 고정 위치 지정에 대한 지식을 유연하게 적용할 수 있기를 바랍니다.

위 내용은 CSS의 고정 위치 지정에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!