CSS의 고정 위치 지정 속성에 대한 지식 포인트는 무엇입니까?-CSS 튜토리얼-php.cn

Welcome to My Website

집

웹 프론트엔드

CSS 튜토리얼

CSS의 고정 위치 지정 속성에 대한 지식 포인트는 무엇입니까?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 28, 2023 am 08:45 AM

top left。

CSS의 고정 위치 지정 속성에 대한 지식 포인트는 무엇입니까?

CSS에서 고정 위치 지정의 위치 지정 속성이 무엇인지 이해하시나요?

CSS의 위치 지정 속성은 페이지의 요소 위치를 제어할 수 있습니다. 고정 위치 지정은 문서 흐름의 다른 요소가 아닌 브라우저 창을 기준으로 요소를 배치하는 위치 지정 방법입니다.

CSS에서 고정 위치 지정에는 위치: 고정이라는 특별한 속성 값이 있습니다. 이 속성 값을 요소에 적용하면 고정된 위치 지정을 얻을 수 있습니다.

다음은 CSS에서 고정 위치 지정의 위치 지정 속성을 더 잘 이해하는 데 도움이 되는 특정 코드 예입니다.

HTML 부분:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="content">
        <h1 id="Welcome-to-My-Website">Welcome to My Website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nisl vel erat semper commodo. Vestibulum maximus metus erat, vitae volutpat tellus faucibus in. Phasellus vel laoreet urna, ac posuere risus. Maecenas gravida luctus condimentum. Sed consequat suscipit tellus nec finibus. Nulla facilisi. Sed vel ante vitae dolor volutpat sollicitudin at vitae elit.</p>
    </div>
</body>
</html>

로그인 후 복사

CSS 부분(style.css):

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navbar ul li {
    display: inline;
    margin-right: 10px;
}

#navbar ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

#content {
    margin-top: 50px;
    padding: 20px;
}

로그인 후 복사

위 코드에서 볼 수 있는 내용은 다음과 같습니다. ID가 "navbar"인 div 요소는 고정 위치로 설정되고 브라우저 창 상단에 위치합니다. 이는 위치 속성을 고정으로 설정하여 수행됩니다. 또한 배경색, 글꼴 색상, 패딩 등과 같은 다른 스타일 속성도 있습니다.

"#content" 스타일에서는 탐색 모음에 의해 콘텐츠가 차단되는 것을 방지하기 위해 위쪽 여백(margin-top)을 더 크게 설정합니다.

위 코드를 실행하면 브라우저에서 결과를 볼 수 있습니다. 아래로 스크롤하면 고정 탐색 표시줄이 페이지 상단에 그대로 유지되며 다른 콘텐츠에 가려지지 않습니다.

고정 위치 지정이 아닌 상대 위치 지정이나 절대 위치 지정을 사용하면 어떻게 될까요? 이는 생각해 볼 가치가 있는 질문입니다. CSS의 다른 위치 지정 속성을 더 자세히 살펴보고 다양한 효과를 비교할 수 있습니다.

이 글이 CSS의 고정 위치 지정 속성을 이해하는 데 도움이 되기를 바랍니다!

위 내용은 CSS의 고정 위치 지정 속성에 대한 지식 포인트는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.