div 플로팅 레이어, 스크롤 막대 이동 및 위치를 변경하지 않고 유지하는 4가지 방법 요약

저자：Eve Cole 업데이트 시간：2025-03-03 19:48:02

div는 상단에 남아 있고 스크롤 막대는 스크롤되지만 div는 여전히 상단에 있습니다! 소스 코드를 직접 업로드하세요.

방법 1:

다음과 같이 코드 코드를 복사합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<머리>

<스타일 유형="텍스트/css">

본문{배경 이미지:url(about:blank);배경 첨부:고정;}

#float{너비:344px;높이:34px;테두리:1px 솔리드 #C0DBF8;위치:절대;상단:0px;}

</style>

</head>

<본문>

</body>

<스크립트 유형="텍스트/자바스크립트">

var IO=document.getElementById('float'),Y=IO,H=0,IE6;

IE6=window.ActiveXObject&&!window.XMLHttpRequest;

while(Y){H+=Y.offsetTop;Y=Y.offsetParent};

만약(IE6)

IO.style.cssText="위치:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";

window.onscroll=함수(){

var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);

if(s>H&&IO.fix||s<=H&&!IO.fix)return;

if(!IE6)IO.style.position=IO.fix?"":"고정됨";

IO.fix=!IO.fix;

};

try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

</script>

</html>

방법 2:

다음과 같이 코드 코드를 복사합니다.

<div>

</div>

중앙 레이어

</body></STRONG>

방법 3:

다음과 같이 코드 코드를 복사합니다.

중앙 레이어

</div>

</body>

방법 4: [CSS를 사용하여 중앙에 맞추기]

다음과 같이 코드 코드를 복사합니다.

<스타일 유형="텍스트/css">

<!--

html,body {높이:100%; 여백:0px;

.mydiv {

배경색: #f9fff6;

테두리: 1px 솔리드 #009900;

텍스트 정렬: 중앙;

줄 높이: 25px;

글꼴 크기: 13px;

글꼴 두께: 굵게;

Z-색인:99;

너비: 300px;

높이: 50px;

왼쪽:50%;/*FF IE7*/

상단:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 너비의 절반 */

margin-top:-60px!important;/*FF IE7 높이의 절반*/

여백 상단:0px;

위치:고정!중요;/*FF IE7*/

위치:절대;/*IE6*/

_top: 표현식(eval(document.compatMode &&

document.compatMode=='CSS1Compat') ?

documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

-->

</style>

<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">

함수 showDiv(){

document.getElementById('popDiv').style.display='block';

}

window.onload=함수(){

showDiv();

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<머리>

</head>

<본문>

</div>

</body>

</html>