CSS 위치 속성에서: 고정 사용 방법

怪我咯
풀어 주다: 2017-06-22 10:16:31
원래의
6770명이 탐색했습니다.

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이 필요합니다.

동일한 방법은

...
요소를 브라우저 하단과 오른쪽에서 20픽셀 떨어진 곳에 고정하는 것입니다. 이번에는 코드는 다음과 같습니다.

#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!