CSS 위치를 사용하는 방법

우리는 계층적 절대 위치 지정을 위해 위치를 자주 사용하는데, CSS로 위치 속성을 어떻게 능숙하게 익힐 수 있을까요? 오늘 우리는 당신과 함께 그것을 공부하기 위해 여기에 있습니다.

위치 구문 및 구조

위치 구문:

위치: 정적 절대 상대

위치 매개변수:

static: 특별한 위치 지정 없음, 개체는 HTML 위치 지정 규칙을 따릅니다.

절대: 문서 흐름에서 개체를 드래그합니다. , 절대 위치 지정을 위해 왼쪽, 오른쪽, 위쪽, 아래쪽 등과 같은 속성을 사용합니다. 그리고 계단식 배열은 CSS z-index 속성을 통해 정의됩니다. 이때 개체에는 여백이 없지만 여백과 테두리는 여전히 있습니다.

상대: 개체는 쌓일 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기반으로 일반적인 문서 흐름에서 오프셋됩니다.

위치 설명:

설정 개체의 위치 지정 방법을 사용하면 레이아웃 레이어를 절대적으로 쉽게 배치하고 상자 개체를 보다 정확하게 제어할 수 있습니다.

위치의 실제 사용

절대 위치 지정은 상자 개체의 위치를 ​​지정하는 데 사용됩니다. 때로는 레이아웃에 여러 개의 작은 개체가 있고 이때 상대 위치 지정을 위해 CSS padding 및 CSS 여백을 사용하는 것이 쉽지 않습니다. 절대 위치 지정을 사용하여 쉽게 수행할 수 있습니다. 특히 한 상자에 여러 개의 작은 상자가 불규칙적으로 배치된 경우 위치 절대 위치 지정을 사용하여 객체를 배치하는 것이 매우 편리합니다.

절대 위치 지정 데모는 그림과 불규칙한 레이아웃에 적합합니다. 절대 위치 지정에는 위치:절대 위치, 상대 위치 지정을 사용할 수 있습니다. 예를 들어 큰 상자에서는 절대 위치 지정과 부동 소수점을 동시에 사용할 수 없습니다. , 일부는 절대 위치 지정을 사용하고 일부는 CSS 부동 위치 지정을 사용하므로 IE6 브라우저는 더 큰 개체에 절대 위치 지정과 상대 위치 지정을 표시하지 않습니다. 이는 IE6 CSS 해킹으로 간주될 수도 있습니다. 그들을.

절대 위치 지정 사용 조건

위치:절대; 위치:상대 절대 위치 지정의 사용은 일반적으로 부모가 위치:상대 위치 지정을 정의하고, 자식이 위치:절대 절대 위치 지정 속성을 정의하고, 자식이 왼쪽 또는 오른쪽 및 위쪽 또는 위쪽을 사용합니다. 하단 절대 위치 지정.

.div{position:relative} 정의, 일반적으로 CSS 너비와 CSS 높이를 정의하는 것이 가장 좋습니다.

.div-a{position:absolute;left:10px;top:10px} 이는 왼쪽으로부터의 거리를 정의합니다. 부모는 10px이고, 부모의 상단으로부터의 거리는 10px

또는

.div-a{position:absolute;right:10px;bottom:10px}입니다. 여기서는 부모의 오른쪽으로부터의 거리가 정의됩니다. 는 10px이고 상위 항목의 하단으로부터의 거리는 10px입니다

HTML 구조에 해당합니다

<div class="div">
    <div class="div-a"></div>
</div>

이렇게 하면 "div-a"는 상위 "div" 상자 내에 절대적으로 위치합니다.

왼쪽(왼쪽)과 오른쪽(오른쪽)은 개체에 대해 하나의 정의만 선택할 수 있으며 아래쪽(하단)과 위쪽(위)도 개체에 대해 하나의 정의만 선택할 수 있습니다.

위치 적용 사례

위치 절대 위치 지정을 적용한 예입니다. 가장 바깥쪽 상자의 CSS 테두리를 빨간색으로, CSS 너비를 400px, CSS 높이를 200px로 설정했기 때문에 절대값을 사용합니다. 이 두 상자의 경우 첫 번째 상자의 CSS 이름은 "div-a"이고 너비는 100px, 배경색은 검은색, 높이는 100px, 위치 지정 거리는 상위 상자로부터 10px, 상자와의 거리는 10px입니다. 왼쪽은 10px입니다. 클래스 이름은 "div-b"이고, 너비와 높이는 각각 50px이고,

색상은 파란색이고, 상위 상자 하단으로부터의 거리는 13px입니다. 부모 오른쪽으로부터의 거리는 15px입니다. 1. CSS 코드는 다음과 같습니다

<style> 
.div{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divc-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 
.div-b{ position:absolute;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 
</style>

html 코드 스니펫

<div class="div"> 
    <div class="div-a"></div> 
    <div class="div-b"></div> 
</div>

CSS의 위치 속성을 사용하는 방법은 매우 다양합니다. 필요한 친구는 저장해 둘 수도 있습니다. 이 사이트.

관련 읽기:

가끔 DIV CSS가 로드되지 않는 이유

위 내용은 CSS 위치를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!