마스터 CSS 포지셔닝 : 텍스트 콘텐츠 변위를 피하기 위해 스택 요소가 우아하게

이 기사에서는 CSS 포지셔닝 속성을 사용하여 스택 할 때 여러 DIV 요소를 달성하는 방법을 자세히 설명합니다. 기본 텍스트 내용의 불필요한 변위를 피하십시오. 핵심 솔루션은 위치를 설정하는 것입니다 : 상위 컨테이너의 상대 및 위치 : 절대 및 상단 : 0, 왼쪽과 같은 오프셋을 설정하는 것입니다.

요소 스태킹에서 텍스트 변위 문제를 이해합니다

웹 레이아웃에서 텍스트 내용이있는 다른 요소 위에 하나 이상의 HTML 요소 (예 : DIV)를 쌓아야 할 때 종종 문제가 발생합니다. 기본 요소의 텍스트 내용은 상단 요소의 추가로 인해 불필요하게 하향 조정됩니다. 이는 일반적으로 브라우저의 기본 문서 흐름 동작 때문입니다.

기본적으로 DIV 요소는 행을 차지하고 요소의 레이아웃에 영향을 미치는 블록 레벨 요소입니다. 블록 레벨 요소가 다른 요소 내부에 추가되면 모두 일반 문서 스트림에있는 경우 새로 추가 된 요소가 HTML 구조에있는 순서대로 기존 컨텐츠를 압박하거나 푸시합니다. 예를 들어, 텍스트가 포함 된 div 내부에 다른 div를 추가하면 새 div는 텍스트를 따르거나 텍스트를 따르면 텍스트를 밀어냅니다. 기본 컨텐츠에 영향을 미치지 않고 진정한 "스택"을 달성하려면 일반 문서 흐름에서 상단 요소를 제거해야합니다.

핵심 솔루션 : 위치의 조합 적용 : 상대 및 위치 : 절대

이 문제를 해결하기위한 핵심은 CSS의 위치 속성, 특히 위치의 조합 : 상대 및 위치 : 절대의 조합을 능숙하게 활용하는 것입니다.

1. 설정 위치 : 상대적 컨테이너에 대한 상대적으로 설정된 모든 쌓인 요소 (즉, 기본 요소가 상주하는 컨테이너)를 포함하는 모 컨테이너를 위치 : 상대.

   • 기능 : 위치 : 상대는 문서 스트림에서 요소를 제거하지 않으며 여전히 원래 위치를 차지합니다. 그러나 주요 기능 중 하나는 내부 위치에 대한 포지셔닝 컨텍스트를 제공하는 것입니다 : 절대 아동 요소. 이는 모든 내부 위치 : 절대 요소 가이 위치의 부모 요소에 비해 배치 될 것임을 의미합니다.

2. 위치 설정 : 쌓아야하는 아동 요소의 절대 절대적 으로 상단 계층에 쌓아야하는 자식 요소 (예 : 기본 텍스트에 오버레이 될 DIV)가 위치로 설정됩니다.

   • 기능 : 위치 : Absolute는 일반 문서 스트림에서 요소를 완전히 제거합니다. 이것은 더 이상 공간을 차지하지 않고 다른 요소의 레이아웃에 영향을 미치지 않음을 의미합니다. 그것은 정적이 아닌 가장 최근의 위치 속성의 조상 요소에 비해 위치됩니다 (즉, 상대, 절대, 고정, 끈적 끈적). 그러한 조상을 찾을 수없는 경우, 초기 포함 블록 (일반적으로 요소)에 비해 배치됩니다.
   • 위치 : 상단, 오른쪽, 하단, 왼쪽 속성을 결합하여 위치의 위치를 ​​정확하게 제어 할 수 있습니다 : 절대 요소. 부모 요소의 상단과 정렬을 달성하려면 상단 : 0 및 왼쪽 : 0이 일반적으로 설정됩니다.

이 조합을 통해 위치의 하위 요소 : Absolute는 이미 문서 스트림이 없기 때문에 부모 컨테이너 내부의 텍스트 내용을 압박하거나 밀지 않고도 상위 용기에 자유롭게 떠 다닐 수 있습니다.

실제 사례

원래 문자의 위치에 영향을 미치지 않고 다른 문자 div를 쌓을 수있는 문자가 달린 셀 div가 있다고 가정 해 봅시다.

HTML 구조

 <div class="셀-컨테이너">
    <div class="셀">
        <span class="베이스 레터"> C </span>
        
        
         a </div>->
    </div>
    <div class="draggable-retter"> a </div>
    <div class="draggable-letter"> b </div>

CSS 스타일

 몸 {
    Font-Family : Arial, Sans-Serif;
    디스플레이 : Flex;
    정당화 컨텐츠 : 센터;
    정렬 구조 : 센터;
    Min-Height : 100VH;
    여백 : 0;
    배경색 : #f0f0f0;
}

.Cell-Container {
    디스플레이 : Flex;
    갭 : 20px;
}

.셀 {
    너비 : 80px;
    높이 : 80px;
    국경 : 2px 고체 #333;
    디스플레이 : Flex;
    정당화 컨텐츠 : 센터;
    정렬 구조 : 센터;
    글꼴 크기 : 48px;
    글꼴 중량 : 대담한;
    배경색 : #fff;
    /* 키 : 내부의 절대 포지셔닝 요소에 대한 포지셔닝 컨텍스트 제공*/
    위치 : 상대; 
    오버플로 : 숨겨진; /* 콘텐츠가 오버플로되는 방지*/
}

.Base-Letter {
    /* 문서 스트림에서 기본 문자*/
    색상 : #555;
    z- 인덱스 : 1; /* 하단에 있는지 확인*/
}

.LETERCELL {
    너비 : 100%; /* 부모 컨테이너의 너비를 무시하십시오*/
    높이 : 100%; /* 부모 컨테이너의 높이를 덮으십시오*/
    /* 키 : .Cell*/에 대한 문서 흐름과 위치에서 벗어나십시오.
    위치 : 절대; 
    상단 : 0;
    왼쪽 : 0;
    디스플레이 : Flex;
    정당화 컨텐츠 : 센터;
    정렬 구조 : 센터;
    글꼴 크기 : 48px;
    글꼴 중량 : 대담한;
    배경색 : RGBA (255, 255, 0, 0.7); /* 기본을 볼 수있는 반투명 배경*/
    색상 : #D00;
    /* z-index베이스 레터 위에 있는지 확인*/
    z- 인덱스 : 2; 
    커서 : 횡령;
}

.Draggable-Letter {
    너비 : 80px;
    높이 : 80px;
    국경 : 2px 점선 #999;
    디스플레이 : Flex;
    정당화 컨텐츠 : 센터;
    정렬 구조 : 센터;
    글꼴 크기 : 48px;
    글꼴 중량 : 대담한;
    배경색 : #eee;
    커서 : 횡령;
}

코드 설명

• .Cell : 이것은 기본 문자가 포함 된 부모 컨테이너입니다. c. 우리는 위치 : 상대적으로 내부 위치에 대한 포지셔닝 참조 : 절대 요소를 설정합니다.
• .BASE-RETTER : 이것은 CLET의 범위이며 .Cell의 일반 문서 스트림에 있습니다.
• .LETTERCELL : 이것은 .Cell에 쌓이는 어린이 요소입니다 (예 : a에서 드래그 된). 우리는 위치를 설정합니다 : 절대; 상단 : 0; 왼쪽 : 0; 그것을 위해. 이로 인해 .Cell의 왼쪽 상단 구석이 정확하게 오버레이되며 문서 스트림에서 나오기 때문에베이스 레터를 푸시하지 않습니다.
• z-index : 스택의 계층 구조를 제어하기 위해 .base- 레터 (1)에 대한 더 낮은 z-index를 설정하고 .LerterCell (예 : 2)의 더 높은 z-index를 설정하여. 레터 셀이 항상 .base-letter 위에 나타나도록합니다.

주요 고려 사항

1. 컨텍스트를 찾는 것의 중요성 : 상대 컨테이너가 상대적 (또는 절대, 고정, 끈적 끈적한 위치를 갖도록하는 것이 중요합니다. 부모 컨테이너에 이러한 위치 지정 특성이없는 경우, 위치의 자식 요소 : 절대 요소는 비 정적 조상이 발견 될 때까지 계속 위쪽으로 검색되거나 결국 요소에 배치되어 예기치 않은 레이아웃 결과로 이어질 수 있습니다.
2. Z-INDEX 사용 : 여러 요소가 함께 쌓이면 Z-INDEX 속성을 사용하여 수직 스태킹 순서를 제어합니다. z- 인덱스 값이 더 높은 요소는 z- 인덱스 값이 낮은 요소의 상단에 표시됩니다. Z-Index는 위치 된 요소에만 유효합니다 (위치 속성은 정적이 아님).
3. 문서 흐름에 대한 영향 : 위치 : 절대 요소는 문서 흐름에서 제거되므로 더 이상 공간을 차지하지 않습니다. 모 컨테이너의 높이가 내용에 완전히 의존하는 경우, 부모 컨테이너는 모든 것이 위치가되면 "붕괴"될 수 있습니다. 따라서 상위 용기의 높이를 명시 적으로 설정하거나 다른 레이아웃 기술을 사용하여 크기를 유지해야 할 수도 있습니다.
4. 적용 가능한 시나리오 : 이 기술은 드래그 앤 드롭 시나리오에 적합 할뿐만 아니라 그림의 텍스트 설명, 복잡한 UI 구성 요소 스태킹, 모달 박스 등과 같은 기본 레이아웃에 영향을 미치지 않고 요소를 다루고 중첩 해야하는 상황에도 적합합니다.

요약

위치 설정 : 상위 용기의 상대 및 설정 위치 : 상단 : 0, 왼쪽 : 0 등과 같이 쌓아야하는 자식 요소의 절대 절대 문서 스트림에서 하위 요소를 효과적으로 제거하여 기본 텍스트 내용을 변화시키지 않고도 상위 컨테이너에서 정확하게 오버레이 할 수 있습니다. z-index 속성과 결합하여 요소의 스태킹 순서를 정확하게 제어하여 복잡하고 우아한 페이지 레이아웃을 달성 할 수 있습니다. 이 CSS 포지셔닝 기술을 마스터하는 것은 반응 형 및 대화식 웹 응용 프로그램을 구축하는 데 중요한 단계입니다.

위 내용은 마스터 CSS 포지셔닝 : 텍스트 콘텐츠 변위를 피하기 위해 스택 요소가 우아하게의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!