position 속성은 요소의 위치 지정 유형, 즉 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 지정합니다. 모든 요소를 배치할 수 있지만 절대 위치 또는 고정 위치 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.
position기본 정적 외에도 상대, 절대 및 고정 속성 값이 있습니다. 이 문서에서는 고정 속성 값에 중점을 둡니다.
1. position:fixed 속성의 의미
fixed: 절대 위치의 요소를 생성하고 브라우저 창을 기준으로 위치를 지정합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.
우리가 일반적으로 고정 위치 지정이라고 부르는 것은 고정 위치 지정이 있는 요소는 스크롤 막대를 사용하여 위아래로 스크롤되지 않습니다.
2. 일반적인 위치:고정; 구현 방법
#top{position:fixed;bottom:0;right:20px}은 id가 top인 요소가 브라우저 하단과 20픽셀에 고정되어 있음을 인식합니다. right
#top{position:fixed;top:20px;right:20px}는 ID가 top인 요소가 브라우저 상단에서 20픽셀, 오른쪽에서 20픽셀 떨어진 위치에 고정되어 있음을 인식합니다
3. 아래 위치 IE6: 수정됨; 구현 방법
IE6에서는 position:fixed를 직접 사용할 수 없습니다. 문제를 해결하려면 CSS Hack이 필요합니다.
동일한 방법은
#top{position:fixed;bottom:0;right:20px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }
오른쪽 및 왼쪽 속성은 절대 위치 지정을 사용하여 해결할 수 있으며 위쪽 및 아래쪽 속성은 위의 표현식을 사용하여 구현해야 합니다. _position:absolute의 _ 기호는 IE6에서만 인식됩니다.
1 요소를 브라우저 창 상단에 고정합니다.
#top{ _position:absolute; _top:expression(eval(document.documentElement.scrollTop));}
2. 브라우저 창 상단에서 한 픽셀의 위치:
#top{ _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); _margin-top:a; }
또는
#top{ _position:absolute; _top:expression(eval(document.documentElement.scrollTop+a)); }
3. 요소를 브라우저 창 하단에 고정합니다.
#top{ _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }
4. 요소를 브라우저 창의 b 픽셀 위치에 고정합니다. 브라우저 창 하단:
#top{ _position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); _margin-bottom:b; }
또는
#top{ _position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b))); }
위 내용은 CSS 위치 속성에서: 고정 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!