这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」。
position定位知识
position：static，跟随文档流，默认设置值，没有top,right,bottom,left,z-index等内容。
position:fixed，脱离文档流，可以设置top....等属性，header这种可以固定在上下左右，所以一些导航栏就是这样设置的，高度不用更改html和body就可以设置为100%；
实例：导航栏固定，并且在导航栏下面设置背景图像
一般使用background必须设置高度，因为设置100%的不会有效果，所以很烦躁，那么今天就是解决这个问题
<style>
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 60px;
background-color: #2ddf2d;
position: fixed;
}
li {
list-style-type: none;
display: inline-block;
line-height: 60px;
}
.background {
background: url("../HTML-CSS/image1.jpg");
width: 100%;
height: 100%;
position: fixed;
z-index: -1
}
</style>
</head>
<body>
<div class="background">
</div>
<div class="header">
<ul>
<li>首页</li>
<li>班级</li>
<li>学生</li>
<li>老师</li>
<li>权限</li>
<li>备份</li>
</ul>
</div>
position:relative，不会脱离文档流，可以设置top...等，但是top是指的相对于自己的内容top:20px;指的是自身下移20px;
<style>
.content {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: -100px;
}
</style>
例子：使用relative和static内容。relative移动覆盖到static的内容，并且设置static的Z-index也是无效的
positon:absolute，1.相对于设置除了static定位的父级元素，进行定位
position:sticky 粘性定位，新出的，和很多不兼容。相对定位和绝对定位的混合。
CSS友好命名规范
wrap：（外套）用于控制外围宽度,header:(头部)
main:(用于中部主体内容)
main-left：左侧布局；
main-right:右侧布局
tag：标签
friendlink：友情链接
logo:标志
brand:商标信息
nav：（导航条）
subnav:二级导航
menu：菜单
submenu：子菜单
content或者container最外层:内容
footer:用于底部内容
layout:可用于布局使用
css文件命名：
master.css,style.css 主要的 module.css 模块 base.css 基本共用 layout.css 布局，版面 themes.css 主题 columns.css 专栏 font.css 文字、字体 forms.css 表单 mend.css 补丁 print.css 打印
使用css伪类画图
1.合理使用after和before伪类
如果伪类是一个有长宽的内容，那么就会无效，也就是伪类内容会在长宽里面，不会在外面，那么就可以设置伪类形状
必须采用定位才能解决位置问题，有一重点是content必须要，没有内容的情况下都使用content:""，没有content的情况下，伪类失效。
<style>
.main {
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
}
.main::before {
width: 100px;
height: 100px;
background-color: blue;
content: "";
position: absolute;
top: 150px;
left: -100px;
}
.main::after {
width: 100px;
height: 100px;
background-color: orangered;
content: "";
position: absolute;
top: 150px;
right: -100px;
}
</style>
3.使用伪类画出带箭头的输入框
原理：采用border的宽度造成形状突变，width，height都为0的情况下，就可以由border形状决定外层形状了，下面演示一下内容
.main::before {
width: 0px;
height: 0px;
background-color: blue;
content: "";
position: absolute;
border-top: 50px solid red;
border-left: 50px solid blue;
border-right: 50px solid orchid;
border-bottom: 50px solid burlywood;
top: 150px;
left: -100px;
}
那么你想将那一边三角形变长，就将border变长，不想要看到其他的使用transparent透明颜色就可以
.main::before {
width: 0px;
height: 0px;
content: "";
position: absolute;
border-top: 50px solid transparent;
border-left: 30px solid transparent;
border-right: 70px solid red;
border-bottom: 50px solid transparent;
top: 150px;
left: -100px;
}
