position定位
Posted hey-李高冷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了position定位相关的知识，希望对你有一定的参考价值。
相对定位（position：relative；相对原始位置）
定位元素位置控制：left | right | top | bottom
特点：
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
background-color: blue;
width: 20px;
height: 20px;
}
.box2{
background-color: blueviolet;
width: 20px;
height: 20px;
position: relative;
top: 20px;
left: 20px;
}
.box3{
background-color: red;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
绝对定位（position：absolute；相对父层而言 ）
定位元素位置控制：left | right | top | bottom
特点：
a、使元素完全脱离文档流；（不会保留原始位置）
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.box1{
background-color: blue;
width: 20px;
height: 20px;
}
.box2{
background-color: blueviolet;
width: 20px;
height: 20px;
position: absolute;
top: 40px;
left: 20px;
}
.box3{
background-color: red;
width: 20px;
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
固定定位（position：fixed； 相对浏览器）
定位元素位置控制：left | right | top | bottom
特点：
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；（问题：IE6不支持固定定位；）
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.box1{
background-color: blue;
width: 20px;
height: 20px;
}
.box2{
background-color: blueviolet;
width: 20px;
height: 20px;
position: fixed;
top: 40px;
left: 20px;
}
.box3{
background-color: red;
width: 20px;
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)
以上是关于position定位的主要内容，如果未能解决你的问题，请参考以下文章