CSS 위치 지정이란 무엇입니까?-프런트엔드 Q&A-php.cn

CSS 위치 지정이란 무엇입니까?

藏色散人

풀어 주다： 2023-01-05 16:07:49

원래의

3268명이 탐색했습니다.

CSS 위치 지정에는 다음이 포함됩니다. 1. 정적 위치 지정을 의미하는 정적 2. 상대 위치 지정을 의미하는 상대 3. 절대 위치 지정을 의미하는 절대 4. 고정 위치 지정을 의미합니다.

CSS 위치 지정이란 무엇입니까?

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS 위치 지정 속성을 사용하면 요소의 위치를 지정할 수 있습니다. CSS는 열형 레이아웃을 만들고, 레이아웃의 한 부분을 다른 부분과 겹치고, 수년 동안 종종 여러 테이블을 사용해야 했던 작업을 수행할 수 있는 위치 지정 속성을 제공합니다.

CSS 위치 지정의 여러 가지 방법:

1. 정적(정적 위치 지정):

기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다. 이전 에세이를 참고하세요.

2. Relative(상대 위치 지정):

상대적으로 배치된 요소는 일반적인 문서 흐름에서 벗어났지만 문서 흐름에서의 위치는 여전히 존재하지만 원래 위치를 기준으로 시각적으로 이동됩니다.

위쪽, 아래쪽, 왼쪽, 오른쪽 설정을 통해 일반(원래) 위치를 기준으로 위치를 지정합니다. Z-색인을 통해 계층적 등급을 매길 수 있습니다.

.static1{
            height:80px;
            background-color: red;
        }
        .relative{
            height:80px;
            position:relative;
            top:40px;
            left:40px;
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>

로그인 후 복사

3. Absolute(절대 위치 지정): 절대 위치 지정 요소를 생성하고 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치를 지정합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다. Z-index를 통해 계층적 분류가 가능합니다.

절대적으로 배치된 레이어는 일반 문서 흐름과 분리되지만 상대 레이어와 다른 점은 일반 흐름에서 해당 위치가 더 이상 존재하지 않는다는 것입니다.

어떤 사람들은 항상 이 속성에 대해 오해의 소지가 있는 정보를 제공합니다. position 속성을 절대값으로 설정하면 항상 브라우저 창에 따라 위치가 정해진다고 하는데 이는 사실 잘못된 것입니다. 실제로 이는 고정 속성의 특징입니다.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            background-color: pink;
            position:relative;
            left:20px;    
        }
        .relative{
            height:80px;
            width:80px;
            position:absolute;
            top:10px;
            left:10px;
        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

로그인 후 복사

4. 고정(고정 위치 지정): 절대 위치 지정 요소를 생성하고 브라우저 창을 기준으로 위치를 지정합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다. Z-index를 통해 계층적 분류가 가능합니다.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            width:300px;
            background-color: pink;            
            left:100px;    
            top:100px;
        }
        .relative{
            height:80px;
            width:80px;
            position:fixed;
            left:20px;        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

로그인 후 복사

【추천 학습: css 동영상 튜토리얼】

위 내용은 CSS 위치 지정이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!