定位执行逻辑：
1：position 把元素从布局流中拿出来
2：确定参照物（absolute参照物是已经定位的最近的父元素、）
3：给元素固定位置的坐标（left right top bottom）
position定位属性 (检索或者设置元素的定位方式)
属性值：
static 默认值 （忽略所元素添加的方位属性：left right top bottom）
absolute 绝对定位
a:脱离布局流，不占据空间。
b:参照物：相对于已经定位的，离当前定位的元素最近的父元素。
c:如果父元素都没定位的情况下，则是以html根元素进行定位。
relative 相对定位
a:占据空间（会保留初始的位置）
b:参照物：自身默认的位置。
包含块的设置：（html就是一个大的包含块）
当定位的时候：
给父元素添加position:relative;让父元素形成参照物(包含块)
然后给要做的定位的元素添加position:absolute;
绝对定位与相对定位的区别：
1：参照物不同
absolute 已经定位的父元素
relative 自身默认位置
2：是否破坏布局流
absolute 不占据空间破坏布局流
relative 占据空间不破坏布局流
3：z-index:(控制定位元素的层次关系。属性值为一个数字，数值越大，层次越高。能接收负数)
默认值为auto;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin:0;
9 padding:0;
10 }
11 .box{
12 width:800px;
13 height:500px;
14 background:orange;
15 position: relative;
16 }
17 h3,h4,h2{
18 width:200px;
19 height:200px;
20 text-align:center;
21 line-height:200px;
22 font-size:60px;
23 font-weight:900;
24 color:#fff;
25 float:left;
26 }
27 h2{
28 background:#000;
29 }
30 h3{
31 background:blue;
32 position:absolute;
33 left:30px;top:50px;
34 }
35 h4{
36 background:green;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="box">
42 <h2>1</h2>
43 <h3>
44 <em></em>
45 </h3>
46 <h4>3</h4>
47 </div>
48 </body>
49 </html>
如何让一个元素在浏览器窗口左右上下居中?
方法1：position：fixed；
left：50%;
top:50%;
margin-left:宽度的一半；
margin-top:宽度一半；
方法2：position：fixed；
left：0；top：0；
right：0；bottom：0:；
margin：auto；
转载于:https://www.cnblogs.com/4813html/p/10501092.html
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
