2.详细展示

2.1 position:absolute

2.2.1 说明:

绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。

2.2.2 视图:

2.2 position:relative

2.2.1 说明

相对定位;脱离文档流的布局,但还在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

2.2.2 视图

2.3 position:fixed

2.3.1 说明

固定定位;类似于absolute,但不随着滚动条的移动而改变位置。

2.3.2 视图

2.3.3 应用场景

①登录框覆盖层:如dz论坛的登录。

②虚假QQ消息广告。

2.4 position:static

2.4.1 说明

无定位,表示此元素为默认定位方式。

2.4.2 应用场景

IE6的特殊处理。

3.总结

3.1 滚动条是否出现

当含有position属性的元素为最边缘元素时:

①absolute 和 relative :含有此2个值的边缘元素,浏览器缩小到此元素不可见时,会出现滚动条。

②fixed :含有此值的边缘元素,浏览器缩小到此元素不可见时,不会出现滚动条。

3.2 示例

3.2.1 视图

http://www.cnblogs.com/polk6/p/3214847.html

css position[转的更多相关文章

  1. css position的使用

    css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...

  2. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  3. jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  4. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  5. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  6. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. CSS position &居中(水平,垂直)

    css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...

  8. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  9. 前端开发必知必会:CSS Position 全解析

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  10. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

随机推荐

  1. C++使用目录

    VS2017的安装和配置 常用指令 C++ 数据类型   常量 运算符 数组 字符串  Ansi与Unicode  指针   模态与非模态对话框  变量的引用& new和delete动态分配和 ...

  2. SAP笔记---非-现存任务/请求XXX上的请求锁定

    不管在SAP中的哪个系统在点击修改程序时都有可能出现以下图中的报错: 已找到解决办法,步骤如下: 1,se11中查看tlock表找到以上提到的请求号记录: 2,进入se16n,输入请求号,在事务代码输 ...

  3. yo install generator-gulp-react遇到UNMET PEER DEPENDENCY问题

    最近在用yeoman下载下来的框架配置react环境 yo install generator-gulp-react安装框架包 遇到了 UNMET PEER DEPENDENCY问题 找不到依赖的gu ...

  4. Pyqt5自定义浏览器

    from PyQt5.QtWebChannel import QWebChannel from PyQt5.QtWebEngineWidgets import QWebEngineView from ...

  5. 在虚拟机安装windows xp时所需要的序列号

    最新的windows xp sp3序列号 xp序列号 最新的windows xp sp3序列号(绝对可通过正版验证)  MRX3F-47B9T-2487J-KWKMF-RPWBY(工行版) 可用(强推 ...

  6. mysql 案例 ~查询导致的tmp临时文件问题

    一 简介:之前遇到一个tmp分区暴涨的问题,后来经过大神的指点,遂分析写下 二 分类: 1  select语句出现 using temporay tmp 下出现 #sql_631a_1.MYD #sq ...

  7. JS直接if参数的用法

    经常在JS中见一些代码直接if(参数),然后参数调用的时候是将元素自己传下去.例如下面代码: <body> <input type="text" name=&qu ...

  8. SpringBoot几个重要的事件回调、监听机制

    (1).需要配置在META-INF/Spring.factories 1.ApplicationContextInitializer // // Source code recreated from ...

  9. ubuntu 安装lightgbm

    前提:安装好git.cmake 1. 安装lightgbm git clone --recursive https://github.com/Microsoft/LightGBM 2. 编译 下载好的 ...

  10. 【vim】查找重复的连续的单词

    当你很快地打字时,很有可能会连续输入同一个单词两次,就像 this this.这种错误可能骗过任何一个人,即使是你自己重新阅读一遍也不可避免.幸运的是,有一个简单的正则表达式可以用来预防这个错误.使用 ...