定位
定位 有三种
1 . 相对定位
2 . 绝对定位
3 . 固定定位
相对定位(relative)
相对定位 : 相对于自己原来的位置定位
现象和使用:
1 如果对当前元素仅仅设置了相对定位 , 那么与标准文档流的盒子什么区别 ,
2 设置相对定位之后 , 我们才可以使用四个方向的属性 : top bottom left right
特性 :
1 不脱标
2 形影不离
3 老家留坑
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途 :
1 , 微调元素位置
2 , 做绝对定位的参考 (父相子绝) 重点
3 , 提升层级(不建议使用)
参考点 :
自己燕来的位置坐参考点 .
示例 :
绝对定位 (absolute)
特性 :
1 脱标 : 不占位置
2 做遮盖效果 , 提升了层级 ,(建议使用)
3 设置绝对定位之后 , 不区分行内元素和块级元素 , 都能设置宽高 ,
参看点 (重点)
一 单独一个绝对定位的盒子
1 当我使用top 属性描述的时候 是以页面的左上角 ( 跟浏览器的左上角区分) 以参考点来调整位置
2 当我使用bottom 属性描述的时候 , 是以首屏页面左下角为参考点 来调整位置 .
二 , 以父辈盒子作为参考点
1 父辈元素设置相对定位 , 子元素设置绝对定位 , 那么会以父辈元素左上角为参考点 , 这个父辈元素不一定是爸爸 , 他也可以是爷爷 , 曾爷爷
2 如果父亲设置了定位 , 那么以父亲为参考点 , 那么如果父亲没有设置定位 , 那么以父亲元素设置定位的为参考点
3 3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了 : 父绝子绝 , 没有实战意义 , 做站的时候不会出现父绝子绝 , 因为绝对定位脱离标准流 , 影响页面的布局 , 相反 , 父相子绝 , 在我们页面布局中 , 是常用的布局方案, 因为父亲设置相对定位 , 不脱离标准流 , 子元素设置绝对定位 ,仅仅的是在当前父辈元素内调整元素的位置,
还要注意 , 绝对定位的盒子无视父辈的padding
作用: 页面布局常见的 父相子绝 !
示例 :
子绝父相---示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father{ width: 992px; height: 460px; background-color: red; float: right; position: relative; } .prev{ width: 50px; height: 50px; line-height: 50px; text-align: center; position: absolute; background-color: #000; color: #fff; top: 50%; left: 0px; } .next{ width: 50px; height: 50px; line-height: 50px; text-align: center; position: absolute; background-color: #000; color: #fff; top: 50%; right: 0; } </style> </head> <body> <div class="father"> <span class="next">></span> <span class="prev"><</span> </div> </body> </html>
绝对定位的盒子居中
1 *{ 2 padding: 0; 3 margin: 0; 4 } 5 .box{ 6 width: 100%; 7 height: 69px; 8 background: #000; 9 } 10 .box .c{ 11 width: 960px; 12 height: 69px; 13 background-color: pink; 14 /*margin: 0 auto;*/ 15 position: relative; 16 left: 50%; 17 margin-left: -480px; 18 19 /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/ 20 }
固定定位
固定当前的元素不会随着页面滚动而滚动
特性 :
1 . 脱标 : 不占位置
2 . 遮盖 , 提升等级
3 . 固定不变
参考点 :
设置固定定位 : 用top 描述 , 那么是以浏览器的左上角为参考点
如果用bottom描述 , 那么是以浏览器的左下角为参考点
作用 :
1 返回顶部栏
2 固定导航栏
3 小广告
Z-index
z-index 的四大特性 :
1 z-index 值表示谁压着谁 , --------- 数值大的压盖这数值小的
2 只有定了位的元素 , 才有z-index , 也就是说 , 不管相对定位绝对定位 , 固定定位 , 都可以使用z-index , 而浮动元素不能使用z-index ,
3 z-index 值 没有单位 , 就是一个正整数 ,默认的z-index 值 为0 , 如果都没有z-index 或者z-index 值 都一样 ,那么水写在后面 , 谁在上面压着 , 定位了元素 , 永远压住没有定位的元素
4 从父现象 : 父亲怂了 , 儿子再厉害也没用
示例 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ width: 0; height: 0; } .top1{ width: 100px; height: 100px; background-color: blue; position: relative; } .top1 .top1-1{ width: 50px; height: 50px; background-color: #333; position: absolute; top: 70px; left: 150px; } .top2{ width: 100px; height: 100px; background-color: red; position: relative; } .top2 .top2-2{ width: 50px; height: 50px; background-color: green; position: absolute; left: 150px; } </style> </head> <body> <div class="top1"> <div class="top1-1"></div> </div> <div class="top2"> <div class="top2-2"></div> </div> </body> </html>
因为top2的权重高于top1的权重,所以top2-2会覆盖top1-1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ width: 0; height: 0; } .top1{ width: 100px; height: 100px; background-color: blue; position: relative; z-index: 5; } .top1 .top1-1{ width: 50px; height: 50px; background-color: #333; position: absolute; top: 70px; left: 150px; z-index: 100; } .top2{ width: 100px; height: 100px; background-color: red; position: relative; z-index: 4; } .top2 .top2-2{ width: 50px; height: 50px; background-color: green; position: absolute; left: 150px; z-index: 200; } </style> </head> <body> <div class="top1"> <div class="top1-1"></div> </div> <div class="top2"> <div class="top2-2"></div> </div> </body> </html>
虽然top2-2的z-index 大于top1-1 的z-index .但是由于他们的父类,
top2 的z-index 小于 top1 的z-index .所以会形成top1-1 覆盖 top2-2. 这就是父类怂了儿子在牛逼也没用.
