css中position fixed固定指定位置

们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间，在做一个项目时需要使一个层相对于浏览器边框固定，那时用position:absolute试了下，发觉absolute是对网页边框而言的。后来，上网查了一些根据滚动条的移动，动态地改变left和top的值的JavaScript语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。

且看下面的代码：

 代码如下 复制代码
<style type="text/css">
<!--
#help{
    width:30px;
    height:20px;
    background-color:green;
    position:fixed;
    left:60px;
    top:100px;
}
-->
</style>

 

我们用上面这段代码来定义页面上的一个层“help”（id=“help”）。这样就能实现我们想要的效果了。

在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。

例

 代码如下 复制代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
    #top{
        border:1px solid blue;
  background:#ccc;
        width:200px;
  height:150px;
        position:fixed;
        _position:absolute;
        bottom:0;
        right:0;
  _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    }

    *html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }
</style>
</head>
<body >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="top">
 测试效果
</div>
</body>
</html>
时间： 2024-12-23 19:16:37

css中position fixed固定指定位置的相关文章

css IE6 position:fixed (固定定位)通过position：absolute的解决方案

css教程 ie6 position:fixed (固定定位)通过position:absolute的解决方案,完全使用position:absolute来解决固定定位问题.因为其他的浏览器都支持绝对定位,在ie6,7,8,9,ff,chrome中均测试通过.注意一点:不能给外包含的元素mod-test设置高度,不然的话,是没有滚动条的.而应该在里面设置一个容器,它设置一个高度  <!doctype html public "-//w3c//dtd xhtml 1.0 transition

css中position:fixed实现div居中

上下左右 居中  代码如下 复制代码 div{     position:fixed;     margin:auto;     left:0;     right:0;     top:0;     bottom:0;     width:200px;     height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这

CSS中position:fixed的使用笔记

做开发几年了,在前端开发中,竟然没有留意position:fixed的用法. 我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没多关注.或许是因为当初在CSS中文手册中看到position:fixed旁边有说明"IE5.5及NS6尚不支持此属性"吧. 昨天,在做一个项目时需要使一个层相对于浏览器边框固定,那时用position:absol

CSS中position属性之fixed实现div居中_javascript技巧

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

css position:fixed固定定位div

先看IE7+.Firefox.Opera的代码:  代码如下 复制代码 <style type="text/css"> #backTop { position : fixed; bottom : 0 ; right:0;} </style> 在IE6中,需要一些CSS Hack来解决它,需要增加:  代码如下 复制代码 <!--[if IE 6]> <style type="text/css"> html {overf

使用CSS样式position:fixed水平滚动的方法

 这篇文章主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下 使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码

使用CSS样式position:fixed水平滚动的方法_jquery

使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码. 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scrol

IOS中UITableView滚动到指定位置_IOS

方法很简单: - (void)scrollToRowAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated 有些需要注意的地方: 如果在reloadData后需要立即获取tableview的cell.高度,或者需要滚动tableview,那么,直接在reloadData后执行代码是有可能出问题的. reloadDa

jQuery实现将div中滚动条滚动到指定位置的方法_jquery

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div