1、position

值 描述
static        默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative     位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute   位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed        位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

2、z-index 属性设置元素的堆叠顺序。值越高越靠前面，仅能在定位元素上奏效（position：xx）

<html>

<head>

    <title>Only fit FireFox! :(</title>

    <!--Some thing about the fixed style!-->

    <style type="text/css">

        .fixed_div {

            position: fixed;

            left: 35%;

            top: 30px;

            width: 400px;

            z-index: 1;

        }

    </style>

</head>

<body>

    <div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>

    <div style="height:888px;background:yellow;"></div>

</body>

</html>

html元素固定的更多相关文章

  1. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  2. stickUp让页面元素“固定”位置

    stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/

  3. Stickup – 轻松实现元素固定效果的 jQuery 插件

    粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...

  4. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  5. css样式控制元素固定在底部

    回复固定在底部:css样式用到了 box-sizing属性 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webk ...

  6. 页面元素固定在页面底部的纯css代码（兼容IE6）

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

  7. 通过css将元素固定在左下角

    position:fixed; bottom:0; left:0;

  8. css固定元素位置(fixed)

    来源:http://www.cnblogs.com/lecaf/archive/2011/03/25/fixed.html fixed是一种特殊的absolute,同样不占文档流,特殊的地方在于fix ...

  9. Bootstrap 固定定位（Affix）

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

随机推荐

  1. 多线程《四》Thread对象的其他属性和方法

    Thread对象的其他属性或方法 介绍 Thread实例对象的方法 # isAlive(): 返回线程是否活动的. # getName(): 返回线程名. # setName(): 设置线程名. th ...

  2. SpringBoot+MyBatis+MySQL读写分离（实例）

    ​ 1. 引言 读写分离要做的事情就是对于一条SQL该选择哪个数据库去执行,至于谁来做选择数据库这件事儿,无非两个,要么中间件帮我们做,要么程序自己做.因此,一般来讲,读写分离有两种实现方式.第一种是 ...

  3. map/fileter

    一.生成器,generator,节省内存,但是增加了CPU的计算时间 (下节课讲函数怎么变成生成器) 每次循环的时候,就按照这个规则(自己定义的逻辑)去生成一个数据. res = [ 'a','1' ...

  4. HDU6318-2018ACM暑假多校联合训练2-1010-Swaps and Inversions-树状数组

    本题题意是,给你一个长度为n的序列,使用最少的操作把序列转换为从小到大的顺序,并输出操作数*min(x,y) 实质上是算出该序列中有多少逆序对,有归并排序和树状数组两种算法,由于数据之间的差值有点大, ...

  5. Python实现——一元线性回归(梯度下降法)

    2019/3/25 一元线性回归--梯度下降/最小二乘法_又名:一两位小数点的悲剧_ 感觉这个才是真正的重头戏,毕竟前两者都是更倾向于直接使用公式,而不是让计算机一步步去接近真相,而这个梯度下降就不一 ...

  6. Puppet全面详解

    1.  概述 puppet是一个开源的软件自动化配置和部署工具,它使用简单且功能强大,正得到了越来越多地关注,现在很多大型IT公司均在使用puppet对集群中的软件进行管理和部署,如google利用p ...

  7. GI缓存

    GI缓存 设置 属性 最大高速缓存大小(GB) 使用滑块设置最大GI缓存文件夹大小.只要可能,GI缓存文件夹将保持在此大小以下.定期删除未使用的文件以创建更多空间.这是由编辑器自动执行,不需要你做任何 ...

  8. springboot整合mybatis,druid,mybatis-generator插件完整版

    一 springboot介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  9. CentOS 6.* 安装node

    CentOS6 安装node 使用node -v 是报错 ./node: error while loading shared libraries: libstdc++.so.6: cannot op ...

  10. Day45--js基本小结

    JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...