CSS 위치 지정이란 무엇입니까?
- 藏色散人원래의
- 2021-04-13 09:08:263265검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!