搜索

当前位置:首页 > 全栈分享 > html+css > 正文

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

发布时间:2018-09-11 00:15:01作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

我们经常看到的悬浮窗都是紧贴电脑屏幕的两侧,比如本站右侧的悬浮窗,也有比较另类的紧贴网页主内容区的悬浮窗,比如下图,本文要讲的就是这种紧贴网页主内容区的悬浮窗该如何实现。
方法很简单,原理说出来大家都会写,最重要的是思路。

html代码:
  1. <div class="absolutelybox"> 
  2.   <div class="referencebox"> 
  3.     <div class="floatwindowleft"></div> 
  4.     <div class="floatwindowright"></div> 
  5.   </div> 
  6. </div> 
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为两个紧贴网页主内容区的悬浮窗,我没有写宽高,因为宽高可以由里面的元素撑开。

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

本文标签:悬浮窗 ,您可以阅读与「悬浮窗 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:一场由css代码里“{}”前的空格引起的风波下一篇:在微信中,图片上的元素需要悬停出现时,在图片上点击,图片被直接放大预览怎么解决

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包