Positive属性的使用方法

Positive属性的使用方法：
Body是最顶级的父容器。

子容器是父容器的内容。

对于absolute与relative，子容器的左边框与父容器的距离=left的值+margin-left的值。

Absolute：位置对于父容器而言，他的位置（left、top）可以通过拖动图形宽度、高度，移动图形调节；与relative相比，在视图窗口中他的位置、大小是可以改变的。

Relative：位置对于父容器而言，他的位置（left、top）、大小有一开始设计的图形控制，不可以在视图窗口中调节。

Fix与Static：它的top，left值无效；如要调节子容器的位置：可通过改变父容器（除了body）的margin的值。

在决定子容器的位置关系时，可改变父容器的Padding 属性的值。

子容器的margin的值无效。

Static ：默认值为static属性，left和top没有起作用，一直跑到最上面去了。

如果相邻的div也是static属性，则依次纵向排列（left、top不起作用）。

此时看到的每个层的位置就是各个层在static时实际的位置。

Fixed：直接以浏览器窗口开始计算left和top的值，唯一的父对象是浏览器
红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值，只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。

同时我也明白了另外一个道理，因为默认的类型都是static，所以当我们的页面长度等定位的不合理时一个会把一个挤走。

Absolute优先级：(是否设定了TRBL)（前提是父对象的position不是relative，否则则以父对象为准）
没有设定TRBL，默认依据父级的做标原始点为原始点。

如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative优先级：（是否有父对象）
父级的原始点为原始点，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位；
无父级则以BODY的原始点为原始点，配合TRBL进行定位，。

2.position的四种取值
static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定，及时在程序中改变top、left的值也无效
fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。

而且就算用户滚动页
面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。

可惜的是ie还不支持
relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。

absolute:absolute绝对定位，直接指定top、left、right、bottom。

有意思的是绝对定位也是“相对”的。

它的坐标是相对其容器来说的。

容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。

如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。

标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。

<div id="main">
<div id="nav"></div>
<div id="content"></div>
</div>
1. Abbolute排版中：
top, left, right, bottom 是子元素和父元素的关系，例如nav和main 就是这种关系。

margin 是两个相连的元素（div）之间的间隙关系。

margin 规定了自己和周围元素之间的距离。

padding 是元素内部内容和自己的边框的间隙关系。

2. Relative 排版中：
top, left, right, bottom 是元素之间关系，例如nav和content 就是这种关系。

margin 是子元素和父元素的关系，例如nav和main 就是这种关系。

padding 是元素内部内容和自己的边框的间隙关系。

比如1：Class="1" 绝对位置
Class="2" 相对位置
<div class="1"></div><div class="2"></div> 当1固定了位置。

1的样式
float:left;width:100px; height:800px; 2的样式为float:left; position：relative；
margin-left:20px;width:50px; 2的位置在1的右边，距离120px 。

假如有两个div
Java代码
1<div id='parent'>
2<div id='son'></div>
3</div>
div有left和top属性,是用来定位的.
如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置..
如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离.
3. Absolute Inside Relative 排版
top, left, right, bottom 是子元素和父元素的关系，并不是相邻两个元素之间的关系。

例如nav和main就是这种关系。

margin 规定了自己和周围元素之间的距离。

padding 是元素内部内容和自己的边框的间隙关系。

我们知道在CSS排版中，很容易向左和向上对齐与固定元素的位置，但是很多时候我们需要固定向下和向右的距离，我们怎么做呢，答案是使用Absolute inside relative, 然后设置在CSS中设置bottom 或者right 属性。

例如，我们想固定productLogo的下边框和content的距离是30px, 代码如下：。