<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>模拟固定定位fix</title>

 <style>

 html{ height:100%; overflow:hidden;}

 body{margin:0;  height:100%; overflow:auto;}

 .box{height:2000px;}

 .div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}

 </style>

 </head>

 <body>

 <div class="box">

     <div class="div"></div>

 </div>

 </body>

 </html>

html{ height:100%; overflow:hidden;}//此处让其跟文档height一样
body{margin:0;  height:100%; overflow:auto;}//此处也是让其跟html元素的height一样，相对html元素
.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}//此处用了绝对定位，而此处的定位是相对文档的，当滚动条滚动的时候自然这里，没有相对html滚动，从而达到固定定位fix遮掩的效果（兼容性很好）

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 .box{height:2000px;}

 .div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));

 }

 </style>

 </head>

 <body>

 <div class="box">

     <div class="div"></div>

 </div>

 </body>

 </html>

_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100)); 这里针对的ie6以下不支持fix属性，来模拟的。性能不是很好

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>图片块中居中</title>

 <style>

 .box{ width:800px;height:600px;border:2px solid #000; text-align:center;}

 span{ display:inline-block; height:100%; vertical-align:middle;}

 img{ vertical-align:middle;}

 </style>

 </head>

 <body>

 <div class="box">

     <img src="bigptr.jpg" /><span></span>

 </div>

 </body>

 </html>

图片块中居中，这种方式兼容性很好，语法也简单

 <style>

 .box{ width:800px;height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}

 span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}

 img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}

 </style>

这种方式没有上面的好用。不推荐

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉

 </title>

 <style>

 .list{width:302px; margin:0;padding:0; list-style:none;}

 li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}

 p{margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}

 span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}

 </style>

 </head>

 <body>

 <ul class="list">

     <li>

         <p>

             <a href="#">文字文字文字文字文字字文字文字文字文字文字文字字文字文字文字文字文字文字字文字</a>

             <span>文字</span>

         </p>

     </li>

     <li>

         <p>

             <a href="#">字文字文字字文字</a>

             <span>文字</span>

         </p>

     </li>

     <li>

         <p>

             <a href="#">文文字字文字文字文字文字文字文字字文字</a>

             <span>文字</span>

         </p>

     </li>

     <li>

         <p>

             <a href="#">字文字文字文字字文字</a>

             <span>文字</span>

         </p>

     </li>

 </ul>

 </body>

 </html>

li元素里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉

 

解决ie6下不支持fix属性，模拟固定定位的更多相关文章

  1. 解决IE6下不支持 png24的透明图片问题

    常用的两种解决方案: 第一:使用IE滤镜解决 关键代码: css代码  _background:none;_filter:progid:DXImageTransform.Microsoft.Alpha ...

  2. 解决IE6下PNG透明的JS插件:DD_belatedPNG.js

    DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte ...

  3. 解决IE6下png图片透明度不显示的问题

    世界上最遥远的距离,不外乎我在搞前端,你却在用旧IE,现在随着XP要退休了,IE6的市场占有率应该也会逐步下滑.不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动,做网站的朋友依旧不能忽视IE6的存在 ...

  4. 解决IE6下浮动层固定定位的经典方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  6. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  7. 解决IE6下固定定位问题 使用position:fixed

    IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...

  8. 解决IE6下png图片不透明

    ie6着实是非常让人讨厌,显示一张图片,也要带着灰白色的背景色,一张好好的png图片就这么不透明了. 用n多中网上的方式,差点成功的就还有这个了 _background: none; _filter: ...

  9. 解决IE6下 PNG图片有背景问题

    IE6下有时候png格式的图片会存在背景的问题,以下是我常用的解决办法: <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0. ...

随机推荐

  1. wxPYTHON图形化软件开发(一)---LOMO工具箱

    最近学了wxPYTHON,这次就做了一个工具箱软件练手,软件主要是包含各种小工具,目前想到的有密码管理器,日记本,记账本,今天还看到一个网页浏览器,也可能加进来.目前实现的是密码管理器 软件GUI部分 ...

  2. Thinkphp_基础（2）URL模式

    URL请求 ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作,下面是一个标准的URL访问格式: http://se ...

  3. 33条C#和.NET经典面试题目及答案

    1. .NET中类和结构的区别? 答:结构和类具有大体的语法,但是结构受到的限制比类要多. a. 结构不能有默认的构造函数,因为结构的副本是用编译器创建和销毁的,所以不需要默认的构造函数和析构函数. ...

  4. Hibernate 开发流程

    Hibernate内部分装的技术:JDBC(Java Data Base Connectivity), JTA(Java Transaction API) , JNDI(Java Naming and ...

  5. SQLiteDeveloper破解

    Sqlite 管理工具 SQLiteDeveloper及破解 功能特点 表结构设计,数据维护,ddl生成,加密数据库支持,sqlite2,3支持 唯一缺憾,收费,有试用期 下载地址: http://w ...

  6. jQuery method and examples

    一:介绍: jQuery:是DOM和js的封装.jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).现在大多数的pc端的网站都 ...

  7. MySQL分布式集群之MyCAT(转)

    原文地址:http://blog.itpub.net/29510932/viewspace-1664499/ 隔了好久,才想起来更新博客,最近倒腾的数据库从Oracle换成了MySQL,研究了一段时间 ...

  8. Matlab从一系列图片导出AVI视频，导出GIF动图

    平台:Win7,Matlab 2014a 从一系列图片导出AVI视频的M代码如下: clear all; % 清除变量 % 官方示例,命令窗口输入“doc VideoWriter” writerObj ...

  9. 重装Ubuntu16.04及安装theano

    一.卸载现有的ubuntu系统 1.下载MbrFix,并放在C盘根目录. 2.管理员身份运行cmd命令符:切换到C盘根目录,然后输入命令符MbrFix /drive 0 fixmbr,回车确认即可. ...

  10. 2016年中国大学生程序设计竞赛（合肥）-重现赛1001 HDU 5961

    传递 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submiss ...