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）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。
　　　　　　建议去详细通读一下定位体系和包含块。

　　　　”

 

 

C

 

posted @ 2016-03-10 10:23  Html5Skill  阅读(22742)  评论(0)  编辑  收藏  举报