CSS의 위치 속성 사용법에 대한 자세한 설명
이 글은 CSS에서 위치 속성의 사용법, 분류, 사용 효과 표시에 대해 소개합니다. CSS를 배우는 친구들에게 도움이 되길 바랍니다!
CSS에서 위치 속성 사용법에 대한 자세한 설명
1. 위치 속성의 역할은 무엇인가요?
CSS 위치 속성은 문서에서 요소의 위치를 지정하는 데 사용됩니다. 상단, 오른쪽, 하단 및 왼쪽 속성은 요소의 최종 위치를 결정합니다. (MDN 정의).
(추천 학습: CSS 튜토리얼)
2. 직위 분류는 어떻게 되나요?
1. static
일반적인 레이아웃 동작, 문서의 일반적인 흐름에서 요소의 현재 레이아웃 위치입니다. 현재 위쪽, 오른쪽, 아래쪽, 왼쪽 및 Z-색인 속성은 효과가 없습니다.
그 입장은 변함이 없습니다.
2.relative
이 키워드에서는 위치 지정이 추가되지 않은 위치에 요소가 먼저 배치된 다음 페이지 레이아웃을 변경하지 않고 요소의 위치가 조정됩니다(따라서 해당 위치에 공백이 남습니다). 위치 지정이 추가되지 않은 경우 요소의) ). position:relative는 table-*-group, table-row, table-column, table-cell, table-caption 요소에 유효하지 않습니다.
자체 위치를 기준으로 오프셋됩니다.
3. Absolute
는 요소를 위한 공간을 예약하지 않으며 가장 가까운 비정적 위치의 상위 요소를 기준으로 요소의 오프셋을 지정하여 요소의 위치를 결정합니다. 절대적으로 배치된 요소에는 여백이 설정될 수 있으며 다른 여백과 병합되지 않습니다.
이 요소가 존재하지 않았던 것처럼 요소의 오프셋은 이 요소의 비정적 조상 요소를 기반으로 결정됩니다.
4.fixed
는 요소를 위한 공간을 예약하지 않지만 화면 뷰포트(뷰포트)를 기준으로 요소의 위치를 지정하여 요소의 위치를 지정합니다. 화면이 스크롤될 때 요소의 위치는 변경되지 않습니다. 인쇄할 때 요소는 각 페이지의 고정된 위치에 나타납니다. 고정 속성은 새로운 스택 컨텍스트를 생성합니다. 요소 조상의 변환 속성이 없음이 아닌 경우 컨테이너는 뷰포트에서 해당 조상으로 변경됩니다.
낮은 버전의 IE는 호환되지 않습니다.
5. 끈끈함
상자 위치는 일반 흐름(이를 일반 흐름의 위치라고 함)에 따라 계산된 다음 흐름 루트(BFC) 및 포함 블록(가장 가까운 블록 수준 상위 요소)을 기준으로 배치됩니다. ) 흐름에 있는 요소의 . 모든 경우에(위치가 지정된 요소가 테이블인 경우에도) 이 요소의 위치 지정은 후속 요소에 영향을 주지 않습니다. 요소 B가 고정 위치에 있을 때 후속 요소의 위치는 여전히 위치가 지정되지 않았을 때의 B 위치에 따라 결정됩니다. position: Sticky는 테이블 요소에 대한 position:relative와 동일한 효과를 갖습니다.
동시에 Sticky에는 다음과 같은 문제가 있습니다.
1. Sticky는 BFC를 실행하지 않습니다.
2. 스타일 시트 Z-색인이 잘못되었습니다. 쓰기 스타일 인라인이 유효합니다.
3. 끈적임은 컨테이너와 관련되어 있습니다. 즉, 끈적임 기능은 해당 컨테이너에만 적용됩니다. 이 점이 강조되는 이유는 실제 사용 시 몸체 높이를 100%로 설정하면 끈끈한 요소가 특정 위치에서 멈추기 때문입니다.
3. 테스트 코드
테스트 코드의 공개 코드는 다음과 같습니다.
<html html>
<head>
<meta charset="utf-8">
<title>position</title>
</head>
<style>
.main-app{
display: flex;
justify-content: center;
align-items: center;
}
.app-container {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
#the-box{
position: static;
/* position: relative;
top:100px;
left:200px; */
}
.sub-box {
width: 50px;
height: 50px;
}
</style>
<body>
<div class="main-app">
<div class="app-container">
<div class="sub-box" style="background: gray;"></div>
<div id="the-box" class="sub-box" style="background: green;"></div>
<div class="sub-box" style="background: yellow;"></div>
<div class="sub-box" style="background: red;"></div>
</div>
</div>
</body>
</html>이번에 테스트 대상으로 두 번째 요소를 선택했고, 테스트 환경은 크롬 75 버전입니다.
1, static
#the-box{
position: static;
}Result:
정상적인 문서 흐름 표시
2,relative
#the-box{
position: relative;
top:100px;
left:200px;
}Result:
원래 위치를 기준으로 설정된 위치를 오프셋하지만 원래 위치는 보존.
3. Absolute
#the-box{
position: absolute;
top: 100px;
left: 200px;
}결과:
원래 고정 위치는 다른 요소에 의해 점유됩니다. 상위 요소는 비정적(flex)이므로 현재 요소는 상위 요소를 기준으로 설정된 위치에 의해 오프셋됩니다. 요소.
4. 끈적임
끈적한 위치 지정을 효과적으로 수행하려면 위쪽, 오른쪽, 아래쪽 또는 왼쪽의 4가지 임계값 중 하나를 지정해야 합니다. 그렇지 않으면 동작은 상대 위치 지정과 동일합니다.
이 기능은 뷰포트에서 요소의 위치가 고정되는 것입니다. 페이지에 스크롤 축이 없으면 이 기능이 표시되지 않습니다. 이 때 스크롤 축이 나타나도록 상위 요소를 약간 변경합니다. 페이지에서.
.app-container {
width: 100%;
height: 3000px;
display: flex;
justify-content: center;
align-items: center;
}
#the-box{
position: sticky;
top: 100px;
}결과:
페이지를 스크롤하고 요소가 상단에서 100px 이상인 경우 아래로 스크롤할 때 현재 요소 위치가 뷰포트를 기준으로 변경되지 않습니다. 이 기능은 고정 테이블로 사용할 수 있습니다. 헤더.
5.fixed
는 IE7 이하 버전에서는 사용할 수 없습니다. 실제로는 브라우저 창에서 요소의 위치를 고정하는 것과 같습니다.
#the-box{
position: fixed;
top: 100px;
left: 200px;
}결과:
스크롤 축을 어떻게 스크롤하더라도 요소 위치는 항상 동일하게 유지됩니다.
6、상속
위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
7.initial
initial 키워드는 CSS 속성을 기본값으로 설정하는 데 사용되며 모든 CSS 스타일에 적용할 수 있습니다. (IE에서는 이 키워드를 지원하지 않습니다.)
8. unset
이름에서 알 수 있듯이 unset 키워드는 단순히 설정하지 않는다는 의미로 이해하면 됩니다. 실제로는 초기 키워드와 상속 키워드의 조합입니다.
CSS 속성에 unset을 설정하는 경우:
속성이 기본 상속 속성인 경우 값은 상속과 동일합니다.
속성이 상속되지 않은 속성인 경우 값은 초기
9와 동일합니다. revert
아직 사양에 포함되지 않았습니다.
위 내용은 CSS의 위치 속성 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
PHP를 사용하여 소셜 공유 기능을 구축하는 방법 PHP 공유 인터페이스 통합 실습
Jul 25, 2025 pm 08:51 PM
PHP에서 소셜 공유 기능을 구축하는 핵심 방법은 각 플랫폼의 요구 사항을 충족하는 공유 링크를 동적으로 생성하는 것입니다. 1. 먼저 현재 페이지 또는 지정된 URL 및 기사 정보를 얻습니다. 2. UrlenCode를 사용하여 매개 변수를 인코딩하십시오. 3. 각 플랫폼의 프로토콜에 따라 스플 라이스 및 공유 링크를 생성합니다. 4. 사용자가 클릭하고 공유 할 수 있도록 프론트 엔드에 링크를 표시합니다. 5. 컨텐츠 표시 공유를 최적화하기 위해 페이지에서 OG 태그를 동적으로 생성합니다. 6. XSS 공격을 방지하기 위해 사용자 입력을 피하십시오. 이 방법에는 복잡한 인증이 필요하지 않으며 유지 보수 비용이 낮으며 대부분의 콘텐츠 공유 요구에 적합합니다.
PHP는 PHP 댓글 검토 및 방지 전략을 수익을 창출하기위한 블로그 코멘트 시스템을 만듭니다.
Jul 25, 2025 pm 08:27 PM
1. 의견 시스템의 상업적 가치를 극대화하려면 기본 광고 정확한 전달, 사용자 유료 부가가치 서비스 (예 : 사진 업로드, 탑 업 댓글), 댓글 품질에 따른 인센티브 메커니즘 및 준수 익명 데이터 통찰력 수익 창출이 결합되어야합니다. 2. 감사 전략은 컨텐츠 계층 적 노출을 달성하기 위해 댓글 품질 등급으로 보완 된 사전 AUDIT 동적 키워드 필터링 및 사용자보고 메커니즘의 조합을 채택해야합니다. 3. 방지 방지 방지는 다층 방어를 구축해야합니다. Recaptchav3 센서리스 검증, 허니팟 허니 포트 필드 인식 로봇, IP 및 타임 스탬프 주파수 한계는 물을 방지하며 콘텐츠 패턴 인식은 의심스러운 의견을 표시하며 지속적으로 공격을 처리합니다.
PHP를 사용하여 Q & A 커뮤니티 플랫폼을 개발하는 방법 PHP 대화 형 커뮤니티 수익 창출 모델에 대한 자세한 설명
Jul 23, 2025 pm 07:21 PM
1. PHP 개발 질문 및 답변 커뮤니티에서 Laravel MySQL VUE/React 조합의 첫 번째 선택은 생태계의 성숙과 높은 개발 효율로 인해 Laravel MySQL VUE/React 조합의 첫 번째 선택입니다. 2. 고성능은 캐시 (REDIS), 데이터베이스 최적화, CDN 및 비동기 큐에 의존해야합니다. 3. 입력 필터링, CSRF 보호, HTTPS, 비밀번호 암호화 및 권한 제어로 보안을 수행해야합니다. 4. 돈 선택적 광고, 회원 가입, 보상, 커미션, 지식 지불 및 기타 모델은 핵심은 커뮤니티 톤 및 사용자 요구에 맞는 것입니다.
NGINX 및 PHP 서비스의 조합을 구성하기 위해 MacOS를 사용하여 PHP NGINX 환경을 구축하는 방법
Jul 25, 2025 pm 08:24 PM
MAC 환경 구조에서 홈 브루의 핵심 역할은 소프트웨어 설치 및 관리를 단순화하는 것입니다. 1. 홈브리는 종속성을 자동으로 처리하고 복잡한 편집 및 설치 프로세스를 간단한 명령으로 캡슐화합니다. 2. 소프트웨어 설치 위치 및 구성의 표준화를 보장하기 위해 통합 소프트웨어 패키지 생태계를 제공합니다. 3. 서비스 관리 기능을 통합하고 양조 서비스를 통해 서비스를 쉽게 시작하고 중지 할 수 있습니다. 4. 편리한 소프트웨어 업그레이드 및 유지 관리 및 시스템 보안 및 기능을 향상시킵니다.
CSS`Will-Change '재산의 목적은 무엇입니까?
Jul 23, 2025 am 03:47 AM
Will-Change는 성능을 최적화하기 위해 가능한 변경 사항에 미리 브라우저 요소를 알리는 데 사용되는 CSS 속성입니다. 핵심 기능은 브라우저가 렌더링 효율을 향상시키기 위해 미리 레이어를 생성 할 수 있도록하는 것입니다. 일반적인 값에는 변환, 불투명도 등이 포함되며 여러 속성 쉼표로 분리 할 수도 있습니다. 비표준 속성 애니메이션, 복잡한 구성 요소 전환 및 사용자 상호 작용 트리거 애니메이션에 적합합니다. 그러나 남용을 피해야합니다. 그렇지 않으면 과도한 메모리 사용 또는 GPU 부하가 증가 할 것입니다. 모범 사례는 변경이 발생하기 전에 적용하여 완료된 후에 제거하는 것입니다.
일반적인 CSS 브라우저 불일치는 무엇입니까?
Jul 26, 2025 am 07:04 AM
다른 브라우저는 CSS 구문 분석에 차이가있어 주로 기본 스타일 차이, 박스 모델 계산 방법, Flexbox 및 그리드 레이아웃 지원 수준 및 특정 CSS 속성의 일관성없는 동작을 포함하여 일관되지 않은 디스플레이 효과가 발생합니다. 1. 기본 스타일 처리는 일치하지 않습니다. 해결책은 CSSRESET 또는 NALLER.CSS를 사용하여 초기 스타일을 통합하는 것입니다. 2. IE의 이전 버전의 박스 모델 계산 방법은 다릅니다. 상자 크기 : 통일 된 방식으로 테두리 박스를 사용하는 것이 좋습니다. 3. Flexbox 및 Grid는 Edge Case 또는 Old 버전에서 다르게 수행합니다. 더 많은 테스트 및 AutopRefixer 사용; 4. 일부 CSS 속성 동작은 일관성이 없습니다. Caniuse는 상담하고 다운 그레이드해야합니다.
Vue 완제품 리소스 웹 사이트에 대한 무료 입장. 완전한 Vue 완제품은 온라인으로 영구적으로 보입니다
Jul 23, 2025 pm 12:39 PM
이 기사는 VUE 개발자 및 학습자를위한 일련의 최상위 완제품 리소스 웹 사이트를 선택했습니다. 이러한 플랫폼을 통해 온라인으로 온라인으로 대규모 고품질 Vue 완전한 프로젝트를 탐색, 학습 및 재사용 할 수 있으므로 개발 기술과 프로젝트 실습 기능을 빠르게 향상시킬 수 있습니다.
CSS에서 속성 선택기를 사용하는 방법은 무엇입니까?
Jul 23, 2025 am 03:50 AM
CSS에서 속성 선택기는 요소의 속성 및 값에 따라 스타일을 설정하여보다 유연한 스타일 제어를 제공 할 수 있습니다. basical 사용 : 입력 [유형]과 같은 특정 속성을 가진 요소를 선택하여 유형 속성을 포함하는 모든 입력과 일치합니다. ②exact match : 사용 = 텍스트 입력 상자에만 일치하는 입력 [type = "text"]과 같은 특정 속성 값과 일치합니다. ③ 부분 일치 : 특정 링크를 포함하는 앵커와 일치하도록 [href = "example.com"]와 같은 속성 값의 일부와 일치하도록 ASE = (include), ^= (시작) 및 $ = (END); compination match : inputtype = & qu와 같은 여러 속성을 동시에 일치시킵니다.
