定位
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;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div class="pt">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
当我们给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定位
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;
<style>
*{
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;
}
</style>
</head>
<body>
<div class="pt">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
当给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;
<style>
*{
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;
}
</style>
</head>
<body>
<div class="pt">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
当我们给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的位置和出现隐藏)
网友评论