# 定位(position)(确定元素的位置)
定位是一种更高级的布局手段
通过定位可以将元素把摆放在页面的任意位置
使用position属性来设置定位来设置定位
可选值
static默认值 元素是静止的没有开启定位
relative 开启元素的相对定位
absoluted 开启元素的绝对定位
fixed 开启元素的固定定位
# 静态定位(static)
static，无特殊定位，它是html元素默认的定位方式.
即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象.
该定位方式下,top,right,bottom,left,z-index等属性是无效的。
# 相对定位(position:relative)
参照自己当前的位置去进行移动.
我们以前学过几种布局方式
浮动 从左往右依次排列
正常布局 从上往下依次排
display:inline-block 看上去水平排列,本质上还是文本,有解析空格和垂直对齐的问题
1.参照物:用来确定物体位置的基点
2.根据参照物,描述位置偏移量
相对定位的特点
1.元素开启相对定位后,如果不设置偏移量元素不会发生任何的变化
2.相对定位参照元素在文档流中自身的位置进行定位
4.相对定位不会脱离文档流,相对移动的时候,不会影响其他元素布局,只 是这个盒子表现在页面的位置发生了改变.
5.相对定位不会改变元素的性质，块还是块，行内还是行内
6.相对定位会提升元素的层级
# 绝对定位(position:absolute)
绝对定位的位置参照物坐标:标志性建筑物
请先去参照物的位置,然后从这个位置出发,找到目标位置.
绝对定位的写法特点
父相子绝
父亲设置相对定位,子元素设置绝对定位相对于父亲去移动自身的位置.
绝对定位的参照物特点
有定位属性的最近的祖先(父级/父级的父级/父级的父级的父级)元素,
有定位属性就代表position:relative/position/fixed(有这其中一个,才能被子元素所参照)
最近:一层一层往外面去寻找父级最终找到视口
偏移量相对于参照父级的padding-box来计算位置.(包含padding不包含border)来进行计算的
绝对定位元素会脱离文档流,不保留位置,同级绝对定位盒子叠加,后写的在上面
块级化:将元素强行转化为块级元素,它具有块元素的所有性质,但是不具有父元素宽度100%的特性,而是由里面的元素撑开的,
绝对定位会让浮动失效
# 固定定位(position:fixed)
我们又叫它牛皮糖,扫地阿姨搞半天都刮不下来,无论怎么搞它就在那里.
我们网页上也有这样的牛皮糖.就好像粘在你的屏幕上一样.怎么动它就在那里.
这与绝对定位的工作方式完全相同，只有一个主要区别：
绝对定位的固定元素是相对于HTML元素或其最近的定位祖先.
而固定定位的固定元素则是相对于浏览器视口本身。
固定定位元素不会随着网页滚动条滚动而滚动
body{
height: 2000px;
}
span{
position: fixed;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
<span>是兄弟就来砍我</span>
/*固定定位参照绝对定位理解,同样有块状化,脱离文档流等等特点.
就是除了参照物的不同其他几乎相同.*/
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 七层层叠结构
背景层
最底层的东西,背景就好像你给墙涂上油漆贴上墙纸,最后去挂画的时候,你见过把画挂在墙纸里面的吗?
==> 块级元素(block)层级 ==> float浮动层 ==》 文本(inline/inline-block)层级 ==> position定位层级
定位层级就如何一个图钉去钉在某些元素上面一样.
这里只有5层层叠结构,这里position层级因为有z-index的参与而变得不同,
同样是定位层级,后写的元素同样会盖住先写的元素,
如果我们想修改元素的覆盖关系的时候,我们需要去修改HTML结构.
但是如果有一叠钞票,一张叠着一张的,我们这时想要放在下面的第二张钞票的时候,第二张钞票就凸显出来.怎么办呢?
那就必须比第一张高,怎么比第一张高.
我们就需要动态的去调整层级关系.Z-index控制定位元素谁高谁低的操作.
z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了
position属性，且属性值为非static值的元素）上有效果。判断元素在
Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。z-index默认为0(auto),
可以大于等于0的正整数 数值越大越层级越高,只在定位元素内生效
也是可以写小于0的负整数,层级是最低的.
ul{
width: 600px;
height: 600px;
margin: 100px auto 0;
border: 2px solid pink;
}
.bro1{
height: 200px;
background-color: skyblue;
}
.bro2{
margin-top:-100px;
height: 200px;
background-color: lightgreen;
}
.bro3{
margin-top:-100px;
height:200px;
background-color: pink;
}
<ul>
<li class="bro1">1</li>
<li class="bro2">2</li>
<li class="bro3">3</li>
</ul>
/*此时2的一部分在1的下面,3的一部分在2的下面.像不像叠着的钞票?
如果我们想让我们鼠标悬浮在哪个元素哪个元素就露出来*/
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
li:hover{position:relative;}
/*鼠标放上去的时候元素层级变高了
但是如果这些元素全部都写上了position:relative呢?*/
2
3
li{position:relative;}
/*就不能控制元素显示的高低了.
我们就可以去使用z-index*/
2
3
li:hover{z-index: 1;}
/*当鼠标悬浮在上面的时候.层级就发生改变
此时我们写上z-index为0,元素显示不会发生改变,说明默认确实是0*/
2
3
假如我们z-index写上负数呢?
li:hover{z-index: -1;}
/*当我们鼠标放到元素上就会被其它元素盖住*/
2
或者你可以自己去修改元素的z-index
.bro2{
z-index:1;
}
/*此时这个类名为bro2的盒子就会盖在3的上面.因为其他元素默认的z-index为0.*/
2
3
4
七层层级
z-idnex为负数==> 背景 ==> 块级元素(block)层级 ==> float浮动层 ==> 文本(inline/inline-block)层级 ==> z-index为0/auto ==> z-index为正
同级元素中，后面元素的层级会高于之前层级。
父子元素中，子元素层级会高于父元素层级。
想要改变层级关系，使用z-index，同级元素中z-index越大层级越高。
但z-index不会影响父子元素，父元素调高z-index值也无法比子元素的层级高。
定位水平居中盒子的两种方法.
ul{
position: relative;
width: 600px;
height: 600px;
margin: 100px auto 0;
border: 2px solid pink;
}
li{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;/*只设置绝对定位不给偏移量,左右两边的auto会暂时失效*/
width: 200px;
height: 200px;
background-color: pink;
}
/*position的方向值全部设置为0,说明小盒子完全能够分配大盒子的空间.
小盒子知道了大盒子上下左右的空间.
相当于四只手用弹簧拉它,拉力都是一样的.
会在小盒子比大盒子大失效,先margin在定位,定位最后执行*/
<ul>
<li></li>
</ul>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
ul{
position: relative;
width: 600px;
height: 600px;
margin: 100px auto 0;
border: 2px solid pink;
}
li{
position: absolute;
top: 50%;
left: 50%;/*先将盒子的左上角推到大盒子的中心点*/
margin-top: -100px;/*最后平移margin的负值将元素正中心点对准盒子正中心点,实现上 下垂直居中*/
margin-left: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 伪类
hover选择器左侧必须有选择器，右侧的选择器可以设置也可以不设置
当鼠标放在左侧选择器选中的元素的时候代码才会生效
hover右侧的选择器只能时选择兄弟元素或是子元素(包括兄弟元素的子元素)
hover右边选择器
中间什么都不加(空格) 控制后代元素；
>控制子代元素
‘+’控制就近元素 ；
‘～’ 控制同级元素（兄弟元素）；