div_漂浮/悬浮
Posted Html5Skill
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div_漂浮/悬浮相关的知识，希望对你有一定的参考价值。
1、
测试代码为：
<html> <body> <div id="divBack01" style="background-color:silver; height:300px; width:800px"> </div> <div id="divBack02" style="background-color:gray; height:300px; width:800px"> </div> <div id="divPiao" style="background-color:red; width:50px; height:30px; position: fixed; left:800px; top:500px;"> </div> </body> </html>
ZC：
(1)、
divBack01 和 divBack02 是在底层的两个div，divPiao 是漂浮着的 div。
测试下来，设置 divPiao.style.left 和 divPiao.style.top 就可以让 divPiao 移动。到这里，效果还是比较理想的。
(2)、
且 就算divPiao 设置也没有体现出“CSS==>display:block”，也没有体现出block的现象("元素前后会带有换行符")。
感觉 divPiao 和 divBack01/divBack02 是在不同的层次上的，为什么会这样？是∵ position不同的缘故？
PS：CSS 的 "z-index:2147483647;" (ZC: 貌似 此值越大==>离用户越近；此值越小==>离用户越远)
ZC：测试了一下，两个"position: fixed;"的div居然可以叠在一起放置...
ZC: "position: fixed;" ==> 可定位于相对于包含它的元素的指定坐标。
ZC：貌似记得这个父元素的position属性 也是有要求的，但是记不得什么要求了...
参考：http://www.zhihu.com/question/19926700
“
首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。
正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。
绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。
建议去详细通读一下定位体系和包含块。
正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。
绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。
建议去详细通读一下定位体系和包含块。
”
C
以上是关于div_漂浮/悬浮的主要内容，如果未能解决你的问题，请参考以下文章
超简单漂浮广告代码网页漂浮广告代码jQuery漂浮广告div漂浮层