div在游览器中的相对位置显示

liangphp 2012-04-06 02:19:43

<div id=\"showmessagereminddiv\" style=\"width:270px;
height:30%;
display:none;
border:1px #009 solid;
background-color:#f6f6f6;
position: absolute;
top:65%;
bottom:10%;
left:50%;
margin-left:220px;
margin-top:10px;\"></div>
以上是我从网上找的.....

我想让div显示在游览器的右下角，可是在ie8下测试正常，可是到了谷歌游览器位置就不对了。
是不是应该根据什么坐标来定位div啊，js学艺不精，请各位前辈们帮忙看看啊。

...全文

121 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Z_Lacey 2012-04-06

打赏
举报

[Quote=引用 4 楼的回复:]
这个效果已经达到了,图像不会随页面的其余部分滚动。那你把你想要的东西固定到右下角就好了。
[/Quote]
试一下吧。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <style type="text/css">

        #close

        {

            position: fixed !important;

            position: absolute;

            right: 0;

            bottom: 0;

            top: expression(offsetParent.scrollTop+offsetParent.clientHeight-149);

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="close" style="z-index: 999; float: right; margin: 10px 10px 0 0; height: 140px;">

        <img alt="始终固定在右下角" src="js/未命名.jpg" onclick="this.parentNode.parentNode.style.display='none';" />

    </div>

</body>

</html>

Z_Lacey 2012-04-06

打赏
举报

这个效果已经达到了,图像不会随页面的其余部分滚动。那你把你想要的东西固定到右下角就好了。

liangphp 2012-04-06

打赏
举报

[Quote=引用 2 楼的回复:]
是不是要这种效果,是的话用background-attachment: fixed;就行了。

JScript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns……
[/Quote]
非常感谢你。
好像不是啊，我就是想要那种类似QQ空间消息提醒（客户端），我想让它在游览器中也显示在游览器右下角差不多的那个位置上，不好意思，我的表达不是很好，您能理解吗

Z_Lacey 2012-04-06

打赏
举报

是不是要这种效果,是的话用background-attachment: fixed;就行了。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>背景图片是否移动</title>

    <style type="text/css">

        body

        {

            background-image: url(js/未命名.jpg);

            background-repeat: no-repeat;

            background-attachment: fixed; 

            background-position:center;

            /*

            scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 

            fixed 当页面的其余部分滚动时，背景图像不会移动。 

            inherit 规定应该从父元素继承 background-attachment 属性的设置。 

            */

        }

    </style>

</head>

<body>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>s

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

    <p>

        图像不会随页面的其余部分滚动。</p>

</body>

</html>