让DIV块在网页页面的某个部位固定不动的css编码

2021-01-20 13:52 jianzhan
这个特性1共有4个选项:static、relative、absolute、fixed。很开心,大家在阅读文章了有关的注解后,大家大约能看到fixed是较为合乎大家的要求的:
fixed:
部位被设定为 fixed 的元素,可精准定位于相对访问器对话框的特定座标。此元素的部位可根据 "left"、"top"、"right" 和"bottom" 特性来要求。无论对话框翻转与否,元素都会留在那个部位。工作中于 IE7(strict 方式)。
因而大家很快就有了下列的编码,但是很遗憾,IE中其实不能根据严苛的检测,可是FireFox中却能够根据检测!

拷贝编码
编码以下:

<html>
<head>
<!--http://volnet.cnblogs.com-->
<title>Only fit FireFox! :(</title>
<!--Some thing about the fixed style!-->
<style type="text/css">
.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
</style>
</head>
<body>
<div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>
<div style="height:888px;"></div>
</body>
</html>

无论上面上面说的IE7的strict方式,很明显,除IE7,大家的挑戰也有包含IE6在内的1大堆未知的要素。很明显,尽管这个方式根据了FireFox,但大家還是宣布不成功了。
难道说大家只能应用JavaScript让这1切再次“卡”下去么?(我指的是用JavaScript的情况下实际效果很卡)
自然不好,大家的关键到底在哪儿?大家该怎样去消除它呢?带着这样的烦闷,大家必须刚开始新的冒险。
HTML到底是啥?
这个难题换在其他地区问,您将会要搬出1大堆的文本文档来告知我HTML的界定,但这里我其实不必须那末详细的回答。大家了解HTML是由1大堆的<tag></tag>构成的,而这1大堆的<tag></tag>组成在1起,它们的构造就像1棵树,是的,HTML的编码便是被解释以便1棵树被访问器所了解。它有1个根,那便是<html></html>节(root),在根连接点下普遍的连接点中,大家一般能见到<head></head>和<body></body>两个连接点,它们之下又有……
如今回望1下大家的难题,大家的难题是大家翻转翻转条的情况下大家期待在其中的1个特定的div不容易跟随翻转条翻转。
那末下面让大家往返答另外一个难题,啥是翻转条?
翻转条,说白了,便是能够翻转的条(ScrollBar)(空话)。精确地说,翻转条一般是大家在网页页面的內容超出了访问器显示信息框的范畴的情况下,以便可以让比较有限的室内空间展现无尽的內容所作出的1个让步的元素,应用它可让大家查询当今网页页面內容以外一部分的內容。
说到这里您估算都还很清晰,但既然我说翻转条也是1个元素,那末它是否也在大家的HTML中呢?又或它是访问器的固有的1一部分?
假如您感觉它是HTML中的1一部分,那末您就对了,由于它是依附于器皿而存在的,而默认设置造成翻转条的器皿是<body></body>或<html></html>节,它其实不是访问器固有的1一部分,访问器只是默认设置详细展现了1全部html文本文档,其实不了解它正中间的內容到底是不是必须翻转条的适用。
那末让大家回望上面的那几行编码吧,假定fixed对您当今(不成功)的访问器失效的话,那末大家看来看它们的构造,外面是html标识,向内是body标识,再向内则是div标识,div标识很显著是它们的1一部分,这样假定大家的div标识所设定的精准定位特性不管怎样(4个将会的特性皆没起到甚么功效)更改不上本身显示信息情况。大家能否拆换1个思路呢?
刚刚我说了,翻转条是器皿所固有的,无论是外面那个翻转条,還是里边那个翻转条。那末我能否让这个必须固定不动的div和那个body或html器皿摆脱关联呢?
看到翻转条的操纵能够根据CSS的overflow的几个特性来操纵,想必大伙儿都不生疏了。(生疏的盆友点一下有关连接便可进到查询)
那末我是不是能够自身设定两个彻底防护的div来仿真模拟这类情景呢?(虽然是仿真模拟,可是实际效果1模1样噢~)

拷贝编码
编码以下:

<html>
<head>
<title></title>
<style type="text/css">
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</style>
</head>
<body>
<div class="fixed_div">I am still here!</div>
<div class="virtual_body">
<div style="height:888px;">
I am content !
</div>
</div>
</body>
</html>

剖析:
html,body:将默认设置将会会任意出現的翻转条,彻底地掩藏了,这样无论您放了啥內容,它们都不容易出来了。
.virtual_body:说白了,便是1个假的body了,它被设定为长宽都为100%的,意思便是它运用了全部可视性的访问器窗体显示信息全部的內容,并竖直容许出現翻转条。
.fixed_div:这下它能够运用肯定值开展精准定位了,由于在这个情景下,这个网页页面100%地被那个仿冒的body给独霸了,而翻转条总之也出不来,您便可以自觉得是在某个点蹲坑了,肯定安全性。
想必您根据这些编码早已掌握了新的方式但是是将1个div换作了以前的body。