CSS의 절대 속성에 대한 구체적인 분석

특성:

absoulte 및 float 에는 동일한 속성이 있습니다: 포장 및 파괴
absoulte 및 float 교환 가능
상대적 영향을 받지 않음 제한된 절대 위치 지정, 행동 성능은 left/right/top/button/auto 및 기타 속성

행동 성능

을 문서 흐름에서 벗어나
를 부동으로 사용할 필요가 없습니다. ( float 및 absoulte 요소는 동시에 나타날 수 없습니다.)
위치 따르기(여전히 원래 위치에 있음)
문제: IE7에서는 absoulte 요소를 사용합니다. 항상 inline-block 요소
솔루션: 설정된 속성이 없는 태그 레이어 위의 외부 레이어

정확한 위치 지정을 위해 여백과 함께 사용할 수 있습니다.

음수 위치 지정 지원
IE6과의 강력한 호환성
강력한 적응성, 우수한 유지 관리성 및 견고성

애니메이션은 가능한 한 기능적이어야 합니다. 절대 위치에 있는 요소에서는 여러 개의 absoulte 요소가 겹치고 후자가 맨 위에 위치합니다.

z-index 종속성 없음

하나만 있는 경우 absoulte 요소, 설정할 필요 없음
두 개처럼 각 absoulte 요소는 DOM 흐름의 순서를 제어합니다.
다중 위치 인터리빙, z-index: 1을 제어할 필요는 없습니다. 팝업이 아닌
absoulte 요소, z-index < = 2 중복되는 경우 최적화해야 합니다

왼쪽/오른쪽/위/아래 및 너비/높이가 서로 교체될 수 있습니다

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7+支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

절대적인 전체 레이아웃

<header></header><article>
   <aside></aside>
   <main></main></article><footer></footer>

1 header,footer{ positon:absoulte; left:0; right:0; }
2 header{ height: 50px; top: 0; }
3 footer{ height: 20px; bottom: 0; }
4 aside{ position: absoulte width: 200px; top: 0; bottom: 0; left:0; }
5 main{ position: absoulte; top: 50px; bottom: 50px; right: 0; left: 200px; overflow: auto;}

위 내용은 CSS의 절대 속성에 대한 구체적인 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!