static - default and this is the FLOW.

-------------------------------------------------------------------------------------------------------------------------

relative - postition determined by first STATIC element.

top、bottom、left、right

保持文档流,占空间——保留自己在z-index:0层的占位。通过设置top、right、bottom、left值相对本身的原始位置发生位移。postition:relative不会改变display类型。

在使用相对定位是,无论是否移动,元素仍然会占据原来的空间。因此,移动元素可以覆盖页面上的其他框。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高,框在栈中的位置就越高。

-------------------------------------------------------------------------------------------------------------------------

absolute - position determined by first NON-STATIC element.

top、bottom、left、right

脱离文档流,不占空间——不在z-index:0层保留占位符。通过设置top、right、bottom、left值相于距自己最近的非static祖先元素发生位移。(如果祖先元素全都没有设置,那就是相对body元素)position:absolute(和float)会隐性改变display类型为display:inline-block方式显示。

注:display:inline-block

inline-block 元素创建了一个行级的块容器,该元素内部(内容)被格式化成一个块元素,同时元素本身则被格式化成一个行内元素。

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,         使其既具有block的宽度高度特性又具有inline的同行特性。

relative & abusolute相同点:

两个参数都能改变对应元素在文档中的位置,并激活元素的top、right、bottom、left和z-index属性。

CSS:static/relative/absolute的更多相关文章

  1. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  2. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  3. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  4. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  5. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

  6. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  7. CSS:布局的三个关键属性:float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

随机推荐

  1. windows下的mysql客户端mysqlworkbench链接虚拟机上CentOS的mysql服务器

    本人在虚拟机上CentOS的Linux环境下安装了mysql服务器,在本地Windows下安装了mysql的客户端mysqlworkbench ,所以就想让windows下的mysql客户端mysql ...

  2. 【leetcode❤python】 Sum of Left Leaves

    #-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):#     def __init ...

  3. 12.Generics

    benifit: 1.make developers extremely productive is code reuse, which is the ability to derive a clas ...

  4. Building,Packaging,Deploying,and Administering Applications and Types

    buliding types into a module: response files: the IL disassembler:ILDasm.exe add assemblies to a pro ...

  5. C#:常规属性和自动实现的属性

    根据属性的实现方式,属性可分为自动实现的属性和常规属性. 常规属性需要具体的人为的实现get访问器或者set访问器,而且一般需要有一个字段与之相对应:而自动实现的属性的get和set访问器的实现部分被 ...

  6. E2 2014.6.3 更新日志

    增加功能 增加支持中关村获取商品信息 增加个人业绩查询功能 增加赠送和获赠查询功能 增加商品历程分析报表,资金历程分析报表,科目明细分析报表, 销售分析报表 增加服务维修明细表查询报表 完善功能 固定 ...

  7. iOS - Plist 数据解析

    前言 NS_AVAILABLE(10_6, 4_0) @interface NSPropertyListSerialization : NSObject 如果对象是 NSArray 或 NSDicti ...

  8. c++ string的实现。

    第三次做了.只是做个复习.偶然发现之前的版本有内存泄露.基本功还是不过关.这次应该没有内存泄漏了.虽然是个简单版本. 1)了解堆,栈,值copy. 2)几个常用的c的字符函数和c中的char 如何表示 ...

  9. 笔记本_thinkpad_e40

    1. 0578A69 2.驱动下载 相关地址 XPhttp://think.lenovo.com.cn/support/driver/detail.aspx?docID=DR1253259153348 ...

  10. uva 11324 The Largest Clique

    vjudge 上题目链接:uva 11324 scc + dp,根据大白书上的思路:" 同一个强连通分量中的点要么都选,要么不选.把强连通分量收缩点后得到SCC图,让每个SCC结点的权等于它 ...