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. 抓包（Charles工具入门）

    一.charles工具简单使用 1.录制操作 录制请求.清空录制请求: 两种展示请求的视图方式: 2.录制请求的简单分析 (1)请求的总览页面Overview:可查看请求路径.请求方式.请求时间等有关 ...

  2. Jmeter_远程启动

    Jmeter 是Java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起JAVA内存溢出错误. 其实,Jmeter的 ...

  3. 整理LVS架构压力测试工作

    首先,测试环境在模拟环境下进行.     测试环境:1director(apache2.2) + 1realserver(jboss4.2.3GA)+1databaseserver(oracle9i) ...

  4. vim文本编辑

    6.1 vi/vim 的使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Command mode),插入模式(Insert mode)和底线命令模式(Last line mode). 6. ...

  5. 八大排序算法的python实现（一）直接插入排序

    刚参考网上的以及书上的资料把这八大算法又复习了一遍,感悟就是:有些算法原理真的很简单,一看就懂,但实现起来总是有这样那样的问题. 闲言少叙,先贴代码,之后再以自己的理解,以及自己在理解与实现的过程中遇 ...

  6. JavaScript学习笔记——4.数组

    数组(Array) 数组也是一个对象   数组中保存的内容我们称为元素 数组的操作 - 创建数组 - var arr = new Array();   - var arr = []; 例如:var m ...

  7. 使用github和hexo搭建静态博客

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...

  8. django 部署到Ubuntu安装MYSQL56

    阿里云 Ubuntu 14.04 安装mysql 5.6 1.升级apt-get sudo apt-get update 2. 安装mysql5.6版本 apt-get install mysql-s ...

  9. ajax返回数据成功 却进入error方法

    应该是dataType的原因,dataType为json,但是返回的data不是json格式 于是将dataType:"json"去掉就ok了

  10. Qt Creator使用多线程编辑，增加编译速度