首页 新闻 会员 周边

如何让层保持在页面中固定的位置

0
悬赏园豆：15 [已解决问题] 解决于 2013-05-31 13:47

需求是这样的：

，点击新浪微博的图标，在它的上方出现一个二维码：

页面最大的时候还行，但是页面一缩小，或者改变或者页面的分辨率改变，这个二维码的层就不在新浪微博图标的正上方了，各位大神该怎么写啊！

这是这个二维码层的CSS

    .tooltip
    {
        top: 620px;
        left: 980px;
        display: none;
        position: absolute;
        border: 1px solid #ccc;
        width: 120px;
        height: 120px;
        background: url("../images/EmparkQuickMark.jpg") repeat scroll 0 0 transparent;
    }
</style>

lin714115的主页 lin714115 | 初学一级 | 园豆：35
提问于：2013-05-30 22:34
< >
分享
最佳答案
0

将二维码的代码块放在 新浪微博的图标的子级, 同时将 新浪微博的图标 设为相对定位 position:relative.

以下示例不保证整个模块刚好在右下角。可保证二维码在图标的正上方。

 <div style = "width:1000px; height:1000px;  ">
    <div style = "width:100px; height:100px;background:red; position:absolute; right:0px; bottom:0px">
        <span style = "position:relative">图标<div style = "position:absolute; top:-20px;left:0px; height:20px; width:60px;">二维码</div></span>
    </div>

  </div>

 

收获园豆：15
仰光 | 菜鸟二级 |园豆：249 | 2013-05-31 11:11 
 <span style = "position:relative">图标<div style = "position:absolute; top:-20px;left:0px; height:20px; width:60px;">二维码</div></span>
这样就可以实现了。查了一下Position的几个值得解释明白了。absolute的定位是相对以position非static方式定位的祖先类元素的，对吧！
lin714115 | 园豆：35 (初学一级) | 2013-05-31 12:11
其他回答(3)
0

定位+z-index

s_p | 园豆：138 (初学一级) | 2013-05-30 23:36
0

这个二维码的定位应该是相对于Body的

如果你想的是二维码与“关注我们”的相对位置不变，你就应该把二维码放到“关注我们”的容器里，然后在定位

TiestoRay | 园豆：687 (小虾三级) | 2013-05-31 07:40

那关注我们应该是决定定位还是相对定位？

支持(0) 反对(0) lin714115 | 园豆：35 (初学一级) | 2013-05-31 08:20

@lin714115: 

“关注我们”的位置不是没问题么 ，管他做什么

支持(0) 反对(0) TiestoRay | 园豆：687 (小虾三级) | 2013-05-31 09:19

@TiestoRay: 不对啊，没效果，能留个QQ交流吗？

支持(0) 反对(0) lin714115 | 园豆：35 (初学一级) | 2013-05-31 09:25
0

如果你这个body页面宽度是定死的，那你可以用绝对定位定到你想要的位置。

如果body是自适应的话，那你就得用relative相对定位，相对于你要正对的div后面，再用left，

top来调节

休小晓 | 园豆：21 (初学一级) | 2013-05-31 11:14
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。