悬浮窗紧贴网页主内容区定位的方法

我们经常看到的悬浮窗都是紧贴电脑屏幕的两侧，比如本站右侧的悬浮窗，也有比较另类的紧贴网页主内容区的悬浮窗，比如下图,本文要讲的就是这种紧贴网页主内容区的悬浮窗该如何实现。

方法很简单，原理说出来大家都会写，最重要的是思路。

html代码：

css代码：

.absolutelybox { 
    width: 100%; 
    height: 0; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 2; 
} 
.absolutelybox .referencebox { 
    width: 1200px; 
    height: 0; 
    margin: auto; 
    position: relative; 
} 
.absolutelybox .referencebox .floatwindowleft { 
    position: absolute; 
    left: -70px; 
    top: 200px; 
} 
.absolutelybox .referencebox .floatwindowright { 
    position: absolute; 
    right: -70px; 
    top: 200px; 
} 

absolutelybox是一个宽度为100%、高为0的div，为什么高为0？因为高一旦有值就会遮挡网页；为什么不下沉呢？因为下沉后里面的referencebox以及referencebox里面的两个悬浮窗floatwindowleft和floatwindowright都会跟着下沉，在网页有通栏的地方，悬浮窗会被遮挡。

referencebox是一个宽度为1200px(网页主内容区的宽度)，高为0并在absolutelybox里水平居中的div，高为0是为了不遮挡网页主内容区,当然也可以在上一层div里写overflow:hidden;这个没有什么影响。同时，referencebox也是为里面的两个悬浮窗提供定位的相对对象。

floatwindowleft和floatwindowright为两个紧贴网页主内容区的悬浮窗，我没有写宽高，因为宽高可以由里面的元素撑开。

不知大家还有没有更好的办法，如果有请在下面评论出来，更多关于悬浮窗的文章请在下面相关文章里浏览。