static,relative,absolute,fixed含义

static(静态定位):元素框正常生成。块级元素生成一个矩形框,作为文档流的
  的一部分,行内元素则会常见一个或多个行框,至于其父元素中。
  默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
 
relative(相对定位):元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占有的空间仍保留。
 
absolute(绝对定位):元素框从文档流中完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素挥着是初始包含块。
  元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
  元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
 
fixed(固定定位):元素框的表现类似于absolute,不过其包含块是视窗本身。
 

包含块(更像是定义了一个要定位元素的上下文,是定位的重中之重)

(1)根元素的包含块由用户代理创建,在html中,跟元素是html元素,不过有些浏览器会使用body作为根元素。
  在大多数浏览器中,初始包含块是一个视窗大小的矩形。
 
(2)对于一个非根元素来说,如果其position值是relative或static,包含块则由最近的块级框,表单元格或行内块祖先框的内容边界构成。
    (或者所包含块就是它自身,自身是其上下文)
 
(3)对于一个非根元素来说,如果其position值是absolute,包含块设置为最近的position值不是static的祖先元素(不是兄弟元素)。
 
 

偏移属性:top,right,bottom,left(相对于包含块的偏移)

  定位元素也就是position不是static的元素。
 
(1)偏移属性定义元素的大小
尽管有时候元素的尺寸很重要,但是对于定位元素来说则不一定必须要。
下面这个例子中,定位元素就没有指定尺寸,但是效果可以看出它确实有尺寸。
因为这些尺寸将由这些偏移隐含确定计算出。
<div style="  background-color: darkgrey;width: 200px; position: absolute; height: 100px">
<div style="right: 100px;background-color: red;height: 100px;bottom: 0;left: 0;position: absolute;top: 0;"></div> </div>

 
依据上面说的,定位元素是absolute定位,其包含块是最近的position不为static的元素,在这里就是灰块元素。
 
 
(2)内容溢出和剪裁
溢出使用overflow的属性,这里就不说了。
剪裁使用clip,这里不是本章的重点。
 

绝对定位

<div style="height: 100px;width: 200px;background-color: #00ee00;top:10px;position: absolute">绿</div>

<div style="  background-color: darkgrey;width: 300px; position: relative; height: 100px">灰
<div style="background-color: red;width: 200px;height: 100px;top:10px;right: 100px;position: absolute">红</div> </div>

上面这个例子说明包含块与定位元素的关系。
①是absolute定位元素。top=10px;相对于页面根元素。
②是包含块,包含着③absolute定位元素。
③是absolute定位元素。top=10px;相对于②包含块。
 
有时候你可能想确保body元素为其所有后代建立一个包含块,而不是让用户代理选择。
声明: body{position:relative}
 

相对定位

(1)相对定位的元素占据原有空间,如下图中的一段窄空白区域。
并且相对定位元素设置其自身的包含块,然后相对于那个上下文偏移自身。
下图中,红色框就是该②原本文档布局的位置。设置了top:10px;之后,相对于本身的位置下移了10个像素。
<div style="height: 100px;width: 200px;background-color: #00ee00;top:10px;bottom:20px;"></div>
<div style="height: 100px;width: 200px;background-color: gold;top:10px;bottom:20px;position: relative"></div>

 
(2)相对定位的过度受限,产生的后果。
css2.1中指出,如果遇到过度受限的相对定位,一个值会重置两一个值得相反数。因此这里博疼痛=-top
也就是top:10px;bottom:-10px;
效果就是:div元素往下移动10个像素。
<div style="height: 100px;width: 200px;background-color: #00ee00;top:10px;bottom:20px;position: relative"></div>

 
 

个人认为两者有着本质的区别

top,right,bottom,left是元素相对于包含块的偏移属性。
margin-top..等属性是元素中盒模型的外边距属性。
看上去两者都能造成元素与元素的位置关系。
 
---2016-08-21---

left与margin-left的区别

<div style="width:100px;height:100px;background-color:black"></div>
<div style="width:100px;height:100px;background-color:gray;position:relative;left:100px"></div>

效果:

<div style="width:100px;height:100px;background-color:black"></div>
<div style="width:100px;height:100px;background-color:gray;position:relative;margin-left:100px"></div>

 两者的区别就是一个是属于盒模型属性,一个只是相对于包含快的偏移量
 
(还有很多内容有待学习与完善)

CSS 定位之绝对与相对的更多相关文章

  1. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  2. 常用的CSS定位,XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  5. Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  6. CSS定位小技巧

    CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...

  7. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  8. CSS定位(CSS定位概述、相对定位、绝对定位、浮动)

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  9. CSS定位(postion)和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  10. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. 如何一步一步用DDD设计一个电商网站(十)—— 一个完整的购物车

     阅读目录 前言 回顾 梳理 实现 结语 一.前言 之前的文章中已经涉及到了购买商品加入购物车,购物车内购物项的金额计算等功能.本篇准备把剩下的购物车的基本概念一次处理完. 二.回顾 在动手之前我对之 ...

  2. MVVM模式解析和在WPF中的实现(五)View和ViewModel的通信

    MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...

  3. Kooboo CMS技术文档之五:站点配置管理

    站点关系 管理站点间的关系,站点可以有子站点,子站点继承父站点的部分配置数据,同时子站点还可以根据需要,本地化由父站点继承而来的数据.通过继承和本地化,可以让子站点在用最小的改动代价,来完成一个与父站 ...

  4. CENTOS 6.5 平台离线编译安装 PHP5.6.6

    一.下载php源码包 http://cn2.php.net/get/php-5.6.6.tar.gz/from/this/mirror 二.编译 编译之前可能会缺少一些必要的依赖包,加载一个本地yum ...

  5. CentOS 7配置LNMP开发环境及配置文件管理

    安装并配置MySQL 5.6 从CentOS从7.x开始默认使用MariaDB.MariaDB完全兼容MySQL,包括API和命令行.但是很多时候我们还是会想要安装MySQL,所以不能直接通过yum命 ...

  6. Android业务组件化之URL Scheme使用

    前言: 最近公司业务发展迅速,单一的项目工程不再适合公司发展需要,所以开始推进公司APP业务组件化,很荣幸自己能够牵头做这件事,经过研究实现组件化的通信方案通过URL Scheme,所以想着现在还是在 ...

  7. 如何远程关闭一个ASP.NET Core应用?

    在<历数依赖注入的N种玩法>演示系统自动注册服务的实例中,我们会发现输出的列表包含两个特殊的服务,它们的对应的服务接口分别是IApplicationLifetime和IHostingEnv ...

  8. .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的?

    配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置:第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置.要了解配置同步机制的实现原理,先得从认识一个 ...

  9. error C4430:missing type specifier 解决错误

    错误    3    error C4430: missing type specifier - int assumed. Note: C++ does not support default-int ...

  10. iOS在导航栏上居中显示分段控件(UISegmentedControl)

    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedCont ...