定位
2019-02-27 本文已影响0人
JacksonMrwang
Position
普通流 定位
Position：static 默认行为
从上到下从左到右按顺序以流的方式进行定位
子元素会排列在父容器element内
Inline-block
##相对定位（也叫已定位元素）
Position:relative
在普通流的基础上进行偏移
普通流的位置仍然保留
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: orange;
margin: 2px;
}
#a{
background-color: rebeccapurple;
position: relative;
left: 170px;
top: 20px;
}
#b{
position: relative;
top: -30px;
}
#c{
width: 100px;
height: 100px;
background: orangered;
position: relative;
left: 200px;
}
#d{
background: paleturquoise;
position: relative;
right: 0px;
top: 0px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="a">ee
<div id="c">tt</div>
<div id="d">rr</div>
</div>
<div id="b">tt</div>
</body>
</html>
##绝对定位
Position:absolut
在普通流中完全消失
Left top 以左上角为原点进行调整
Right bottom 以右下角为原点调整
当是绝对的时候会从正常流失
Right=0px top=0px 右上角定位
Left=0px bottom=opx 左下角定位
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
position: relative;
width: 300px;
height: 300px;
background-color: orange;
left: 20px;
top: 20px;
}
#b{
z-index: 2;
position: absolute;
/*top: 10px;*/
/*left: 10px;*/
bottom: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: orangered;
}
#c{
/*调整图层高度*/
z-index: 4;
position: absolute;
right: 0px;
top: 0px;
width: 50px;
height: 50px;
background-color: paleturquoise;
}
#t{
top: 50px;
right: 0px;
position: fixed;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
<div id="t">sd</div>
</body>
</html>
固定式布局
Position:fixed;
一窗口为标准
浮动（改进的普通流）
Float:left/right
普通流会认为浮动不存在
