大家都知道fixed定位相对于浏览器窗口，下面就介绍一种不用fixed也能实现其效果的定位方法，就那点css代码，这里就直接呼上来：

<!DOCTYPE html>

<html>

<head>

<title>模拟fixed定位</title>

<style type="text/css">

html{

    height:100%;

    overflow:hidden;

}

body{

    height:100%;

    overflow:auto;

}

.box {

    position:absolute;

    top:100px;

    left:300px;

    width:260px;

    background: red;

    text-align: center;

}

</style>

</head>

<body>

<div class="box">虽然没用fixed，但依然固定不变</div>

<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 />

</body>

</html>

模拟position:fixed效果的更多相关文章

  1. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  2. 完美解决IE6不支持position:fixed的bug

    示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...

  3. js完美解决IE6不支持position:fixed的bug

    详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...

  4. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  5. [转]position:fixed; 在IE9下无效果的问题

    本文转自:http://www.cnblogs.com/xinwang/archive/2013/04/06/3002384.html 平常DIV+CSS布局时,position属性一般用absoul ...

  6. 让IE6支持position:fixed的方法，CSS expression与JavaScript eval讲解

    做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...

  7. webapp前端开发软键盘与position:fixed为我们带来的不便

    前提:我们考虑兼容的环境为android和ios两种智能手机 兼容环境测试结果显示android的表现明显好于ios,ios手机在软键盘呼起收起时存在着很严重的兼容性问题 场景展示: 页面正常状态 软 ...

  8. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  9. 小技巧css解决移动端ios不兼容position:fixed属性，无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

随机推荐

  1. WebAPI 2.x中如何扩展Identity Store

    ASP.NET WebAPI 中引入了新的一套身份验证和授权的机制,官方的叫法是ASP.NET Identity,有关这个概念的细节,感兴趣的同学可以参考 http://www.asp.net/ide ...

  2. Cocos2d-x 3.2 学习笔记（八）Action

    Action -动作.所有精灵的表现,人机交互的表现,都是动作.cocos2dx 里面封装的动作可谓是丰富! Action有三个子类 1.FiniteTimeAction类是所有在有限时间能够完成的动 ...

  3. 哈夫曼树(三)之 Java详解

    前面分别通过C和C++实现了哈夫曼树,本章给出哈夫曼树的java版本. 目录 1. 哈夫曼树的介绍 2. 哈夫曼树的图文解析 3. 哈夫曼树的基本操作 4. 哈夫曼树的完整源码 转载请注明出处:htt ...

  4. Spark入门实战系列--6.SparkSQL（上）--SparkSQL简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .SparkSQL的发展历程 1.1 Hive and Shark SparkSQL的前身是 ...

  5. Windows Azure Service Bus (4) Service Bus Queue和Storage Queue的区别

    <Windows Azure Platform 系列文章目录> 熟悉笔者文章的读者都了解,Azure提供两种不同方式的Queue消息队列: 1.Azure Storage Queue 具体 ...

  6. C++二维码相关库编译

    一.瞎想 坐在地铁上闲来无聊,突然想到了二维码,顺手就百度了下相关的资料,目前C++二维码相关的库不多,也就zbar(开源中国上下了半天也没下载下来).zxing,不过这两个库据说都是解析二维码的,不 ...

  7. ios基础之UITableViewCell的重用（带示例原创）

    之前一个月刚刚系统的开始接触IOS开发,对UI控件大体了解了一遍,但是因为没有实际的参与项目,对细枝末节的还是不很清楚. 昨天突然想到:UITableViewCell的重用到底是怎么回事,上网查了许多 ...

  8. angularJS配合bootstrap动态加载弹出提示内容

    1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascript/#popovers 2.自定义p ...

  9. Auto Mapper03

      经过上一篇博客的学习,大体了解了Auto Mapper的运行机制和操作流程.我们下来学习下,AutoMapper里面具体的一些东西. 一:规则       当我们使用AutoMapper创建实体和 ...

  10. LINUX总结

    LINUX总结 crazyacking 2016-02-26 主要对socket编程,多线程,定时器,条件变量总结 多线程篇 概念: 多线程就是允许一个进程内存存在多个控制权,实现多个线程并发执行. ...