前端基础——定位（position）
relative相对定位/定位偏移量
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
}
.div2{
/*margin-top: 200px;
margin-left: 200px;*/
position: relative;
left:200px;
top:200px;
background-color: blue;
}
.div3{
background-color: green;
}
</style>
<!--
相对定位的特征
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；只写position: relative;没影响
d、提升层级
-->
</head>
<body>
<div class="div1">div1</div>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
absolute绝对定位/定位层级
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
/*margin:0;*/ /*body有个默认样式，在谷歌浏览器中margin：8px;*/
position: relative;
}
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
}
.div2{
position: absolute;
left:200px;
top:400px;
background-color: blue;
}
.div3{
position: absolute;
top: 400px;
background-color: green;
}
</style>
<!--
绝对定位的特征
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document（指的是可视区域）发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
-->
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
b、建议在兄弟标签之间比较层级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
}
.box{
margin: 100px auto;
position: relative;
}
.content{
position: absolute;
background-color: blue;
left: -6px;
top: -6px;
z-index: 2; /*提升层级,想要在前面,就要大于后面的z-index*/
}
.mark{
position: absolute;
background-color: black;
right: -6px;
bottom: -6px;
z-index: 1;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
<div class="mark"></div>
</div>
</body>
</html>
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档（即浏览器的可是区域）进行定位；
问题：IE6不支持固定定位；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
height: 3000px;
}
div{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>返回顶部</div>
</body>
</html>
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)
position:relative | absolute | fixed | static | inherit;
定位清浮动方法、遮罩滤镜
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
遮罩弹窗（优酷弹窗）
标准 不透明度： opacity:0~1;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
background-color: blue;
color: red;
font-size: 48px;
background-color: red;
opacity: 0.2;
}
p{
width: 300px;
height: 300px;
background-color: blue;
}
span{
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span>学习透明度opacity</span>
</body>
</html>
IE 滤镜： filter:alpha(opacity=0~100);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
filter:alpha(opacity=50);
opacity: 0.5;
}
</style>
<!--
IE6、7下的透明度设置
filter:alpha(opacity=0 ~ 100);
-->
</head>
<body>
<div></div>
</body>
</html>
