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

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