CSS 위치 지정에는 다음이 포함됩니다. 1. 정적 위치 지정을 의미하는 정적 2. 상대 위치 지정을 의미하는 상대 3. 절대 위치 지정을 의미하는 절대 4. 고정 위치 지정을 의미합니다.
이 기사의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!