首页 新闻 搜索 专区 学院

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

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 | 园豆:267 (菜鸟二级) | 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
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册