1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

Position属性四个值：static、fixed、absolute和relative的区别的更多相关文章

  1. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. Position属性四个值：static、fixed、relative、absolute的区别和用法

    1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...

  3. 前端定位Position属性四个值

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中. 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身 ...

  4. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  5. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  6. css中的position 的absolute和relative的区别（转）

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  7. css absolute与relative的区别

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

  8. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  9. css 布局absolute与relative的区别

    absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...

随机推荐

  1. Ubuntu 16.04安装Intel显卡驱动（解决Intel HD Graphics 630显卡驱动问题）

    一般Ubuntu都默认包含了Intel显卡的驱动,如果没有,那么先确定是不是显卡太高,比如I7第7代的CPU核显在Ubuntu 16.04中是没有的,导致画面会很卡,原因是Linux 4.4内核不包含 ...

  2. R语言入门学习笔记 - 对R软件的认识

    一.R软件 1.安装R:自行百度☺ 2.R控制台(R Console)和R程序脚本: 打开R软件,就会直接打开控制台,控制台可以显示程序运行的结果.错误提示等信息,也可以直接输入想要执行的操作并立即返 ...

  3. 剑指Offer - 开始没做出来 —— 验证后序序列是否正确

    https://www.nowcoder.net/practice/a861533d45854474ac791d90e447bafd?tpId=13&tqId=11176&tPage= ...

  4. SaltStack学习笔记之安装zabbix_agentd(jinja和pillar)

    一.环境说明 机器 IP 主机名 Master 192.168.0.23 minion.saltstack.com Minion 192.168.0.35 minion-node2.saltstack ...

  5. JButton点击事件

    JButton点击事件: 以前都是搞一个JFrame,放个JButton,然后用鼠标点击: 忽然之间: import javax.swing.JButton; public class Page06 ...

  6. AE After Effect 渲染如何输出设置

    各种输出设置值的对比情况. Microsoft Video1压缩方法情况(该模式下无法采用RGB+Alpha): 一 深度为"数千种颜色",缩放为1280×720(HDV/HDTV ...

  7. 【Akka】Actor模型探索

    Akka是什么 Akka就是为了改变编写高容错性和强可扩展性的并发程序而生的.通过使用Actor模型我们提升了抽象级别,为构建正确的可扩展并发应用提供了一个更好的平台.在容错性方面我们採取了" ...

  8. cocos2d-x+lua开发模式下编辑器的选择

    原本打算直接用CocosIDE的,毕竟是官方出品,并且支持Android远程调试,windows下的调试也非常方便,调试的信息也非常全,智能提示也不错.好了,一切看上去非常完美,可是它有一个致命缺陷, ...

  9. YTU 2634: E3 继承了，成员函数却不可访问

    2634: E3 继承了,成员函数却不可访问 时间限制: 1 Sec  内存限制: 128 MB 提交: 521  解决: 435 题目描述 下面的程序中,派生类Derive继承自基类Base,mai ...

  10. ubutu14.04无法使用sudo，也无法切换到root用户去解决问题怎么办？

    一不小心,修改了/etc/sudoers文件. 惨了. 无法使用sudo了,啥都干不成了. 最最关键的是,也无法用root登录. 本想着要重装系统了. 后来发现了神奇的ubuntu安全模式. 1.重启 ...