简单介绍CSS定位position属性简单介绍CSS定位position属性

定位 position 属性规定元素的定位类型
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position值

值	定义
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

position:absolute;

JS Bin - 锐客网*{ margin:0; padding:0; } .pt{ width:300px; height:300px; border:1px solid red; padding:10px; } .pt>div{ width:80px; height:20px; border:1px solid; } .box1{ background:red; } .box2{ background:yellow; margin:10px 0; } .box3{ background:green; }1 2 3

当我们给box1设置

position:absolute;

属性

.box1{ background:red; position:absolute; }

文章图片
absolute
absolute属性值：absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL）定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。
当我们给box1设置

left:0px;

和

top:0;

时

.box1{ background:red; position:absolute; left:0px; right:0px; }

文章图片
TRBL定位
【简单介绍CSS定位position属性】box1回归到浏览器的左上角
absolute决定定位参考点：
1.当不设置TRBL定位时，以父级的左上角进行定位。在没有父级的时候，他是参照浏览器左上角。
2.如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
3.如果我们给父元素设置了相对定位relative时，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
例：

.pt{ width:300px; height:300px; border:1px solid red; padding:10px; margin:10px; position:relative; }

文章图片
父元素设有相对定位relative

position:absolute;

属性示例：demo1
position:fixed;

*{ margin:0; padding:0; } .pt{ width:300px; height:300px; border:1px solid red; margin:10px; } .pt>div{ width:80px; height:20px; border:1px solid; } .box1{ background:red; } .box2{ background:yellow; margin:10px 0; } .box3{ background:green; }1 2 3

当给box1设置fixed和TRBL值时：

.box1{ background:red; position:fixed; }

文章图片
position:fixed;
fixed:会使定位元素脱离文档流。
设置TRBL：

.box1{ background:red; position:fixed; left:0px; top:0px; }

会相对于浏览器窗口左上角进行定位。

文章图片
TRBL定位
定位点:
1.当不设置TRBL定位时，以父级的左上角进行定位。在没有父级的时候，他是参照浏览器左上角。
2.设置TRBL定位时，则会相对于浏览器窗口左上角进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position:fixed;

属性值练习:demo2
position:relative;

*{ margin:0; padding:0; } .pt{ width:300px; height:300px; border:1px solid red; margin:10px; } .pt>div{ width:80px; height:20px; border:1px solid; } .box1{ background:red; } .box2{ background:yellow; margin:10px 0; } .box3{ background:green; }1 2 3

当我们给box1设置

position:relative;

时

.box1{ background:red; position:relative; }

文章图片
relative
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
设置TRBL值是：

.box1{ background:red; position:relative; left:30px; top:30px; }

文章图片
TRBL
则按照父元素的左上角进行相对应的定位。
定位点:
1.如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样).
2.如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)。
3.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位,位置由TRBL决定(前半段和absolute一样)。如果父级有Padding属性,那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。

positon;
relation;

属性值练习:demo3
position:static
默认值，没有定位，元素出现在正常的流中，忽略top、right、bottom与left值。忽略z-index声明。
使用场景 position开发中常见应用:
1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)