1、固定定位
固定定位:
语法:
position:fixed;
特点:
1.不会随页面的内容滚动而滚动
2.当只设置position: fixed;,没有设置偏移属性,此时对元素本身是有影响的
3.参照元素:浏览器的四个窗口
4.提升层级(在别的元素身上)(box2在box3的身上)
5.脱离正常标准流,不占位,也就是飘起来了
应用场景:
固定的导航栏
固定侧边栏
2、层级
相对定位、绝对定位、固定定位都可以提示元素的层级
1.在层级一样的情况下,结构在后的层级高于结构在前的层级
2.层级必须与定位position一块使用,否则不生效
3.可以设置层级 z-index:n;
层级默认值为0
n可以为正数
负数
0
不能为小数
4.数值越大,层级越高
/* 层级不能为小数 */
z-index: 9.9;
3、透明度属性
1.rgba
透明度属性
rgba
r:red 0-255
g:green 0-255
b:blue 0-255
a:alpha 透明度
0-1 半透明
0 完全透明
1 完全不透明
应用于:
背景颜色
字体颜色
边框颜色
/* 透明度:1 完全不透明*/
background-color: rgba(255, 255, 0, 1);
/* 透明度:0 完全透明*/
background-color: rgba(255, 255, 0, 0);
/* 透明度:0.5 半透明*/
background-color: rgba(255, 255, 0, .5);
background-color: rgba(255, 255, 0, .9);
background-color: rgba(255, 255, 0, .2);
color: rgba(0, 0, 0,.5 );
border: 10px solid rgba(0, 0, 0,.8);
2.opacity
opacity:透明度
取值:
0-1 半透明
0 完全透明
1 完全不透明
注意:这个属性不仅自身透明,而且后代也透明,内容也透明
/* 自身及内容透明,后代也会透明 */
/* 透明度 1 完全不透明*/
opacity: 1;
/* 透明度 0 完全透明*/
opacity: 0;
/* 透明度 .5 半透明透明*/
opacity: 0.5;
4、定位居中方法
让元素实现水平居中垂直居中
类似于页面中的弹窗
1.需要设置宽高
2.设置绝对定位 position: absolute;
3.四个偏移属性值为0
4.设置margin:auto;
.wrap {
width: 400px;
height: 400px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/* auto 浏览器自动计算 */
}