这是我参与「第四届青训营 」笔记创作活动的第8天
绝对定位（父有定位）：
<style>
*{margin:0;
padding:0;}
.box{width:500px;
height:500px;
background:yellow;
margin:0 auto;
position:relative;}
/* 在大屏幕中居中 */
.child{height:200px;
width:200px;
background:red;
left:100px;
top:100px;
position:absolute}
/* 相对父盒子左端和上端100px）
如果父盒子没有定位（上面定位relative），
则子盒子定位是根据屏幕定位（类似没有父盒子的情况） */
/* 一般将父盒子设置为相对定位，子盒子为绝对定位 */
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
其他用法：
span{
width:100px;
height:100px;
background:yellow;
position:absolute;
/* absolute后span变成块级元素，颜色盖满所有面积 */
}
/* 把元素变成块级元素的方法：
1.display:block
2.position:absolute
3.float:left */
固定定位：
<style>
.dd{width:100%;
height:1500px;
background:yellow;}
.box{width:100px;
height:200px;
background:red;
position:fixed;
/* 相对于屏幕不动 */
right:0;
bottom:200px;}
</style>
<body>
<div class="dd"></div>
<div class="box"></div>
粘性定位：
<style>
.header{background:yellow;
width:100%;
height:100px;
}
.dd{background:red;
width:500px;
height:50px;
margin:0 auto;
position:sticky;
top:0px;}
/* 标注粘的位置，距离上方0px */
.box{height:1000px;
background:green}
</style>
</head>
<body>
<div class="header"></div>
<div class="dd"></div>
<div class="box"></div>
</body>
变成半透明
.pic{opacity:0.7}
画三角形：
定位中的层级：z-index数字越大，层级越高（能设置负值）
.box1{
background:yellow;
position:relative;
top:100px;
left:100px;
z-index:1
/* z-index数字越大层级越高，处于上方，盖住别的元素 */
}
.box2{background:red;
position:relative;}
/* 后面的盒子盖住前面的盒子 */
/* 把元素变成块级元素的方法：
1.display:block
2.position:absolute
3.float:left */
水平垂直居中：（定位）
（水平居中：margin:0 auto；）
div{
width:200px;
height:200px;
background:yellow;
position:absolute;
top:50%;
left:50%;
/* 此时图形左上角位于屏幕正中}*/
margin-left:-100px;
margin-top:-100px;}
/* 往回移动50% */
若有父子关系，子盒子的50%根据父盒子大小判定；如果没有，则为屏幕的50%
浮动和绝对定位：
Float:半脱离，文字环绕效果
绝对定位：全脱离，不回出现文字环绕效果\
锚点作用：页面不同区域的跳转，使用a链接
<a href=“#锚点名字”></a>
<div id=“锚点名字”></div>
以上两者互相对应，点击a跳转至div
