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. JSTL-XML标签库

    主页:http://www.cnblogs.com/EasonJim/p/6958992.html的分支页. 一.<x:out> <x:out>标签显示XPath表达式的结果, ...

  2. Linux命令输出头（标题）、输出结果排序技巧

    原文:http://blog.csdn.net/hongweigg/article/details/65446007 ----------------------------------------- ...

  3. 在GNS3中模拟交换机和PC

    一.目标:使用ios c3640交换模块,模拟交换机 二.使用VPCS模拟PC机 VPCS模拟PC机软件下载:   http://down.51cto.com/data/195524 步骤1.启动GN ...

  4. [GraphQL] Query Local and Remote Data in Apollo Link State

    In this lesson, you will learn how to query local and remote data in Apollo Link State in the same c ...

  5. gcc 5.2.0 编译安装笔记-20151110

    **转载请注明出处** by.haunying3 系统版本号 CentOS-6.6-x86_64-minimal 编译器 gcc-4.4.7通过yum安装 rpm -qa | grep gcc gcc ...

  6. CSS3实现各种格子纹理效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. has实现 更新视图但不重新加载页面原理

    URL中#符号本身以及它的字符称之为hash,可以通过window.location.hash获取.hash具有如下特点: 1.has虽然出现在URL中,但不会被包括在http请求中.因此,改变has ...

  8. EJB之JPA

    在前一篇文章中大概了解了EJB是什么?那么接下来就进一步介绍一下它与JPA有什么样的关系?及什么是JPA?JPA怎样用? 一.是什么? 第一次听说JPA是在EJB视屏中,所以一直感觉他们有不解的渊源. ...

  9. Woody的逻辑游戏--怎样换轮胎

    题目:有一个做长途运输的司机要出发了,他用作运输的车是三轮车.轮胎的寿命是2万里,如今他要进行5万里的长途运输.计划用8个轮胎完毕运输任务,如何才干做到呢? 首先将轮胎从1-8依次编号,然后例如以下所 ...

  10. android EditText如何使光标随着输入内容移动

    EditText 使光标随着输入内容移动的setSelection()