18.overflow及父级边框塌陷问题（四大问题）
1.clear : clear: right ; 右侧不允许浮动 clear: left ; 左侧不允许浮动 clear: both ; 两侧都不允许浮动
父级元素塌陷问题:
解决不在父级元素的方法:
1.增加父级元素的高度:
2.增加一个空的div标签，清除浮动 (占内存)
3.在父级元素中添加overflow(滚动条)
4.在父类的后面加一个伪类
20.定位(锁死位置)
20.1相对定位
1.相对定位: 就是相对于自己发生什么变化。在标准文档流中（父级框），原来的位置会保留。 eg: position : relative top: -10px; 就是说:距离顶部的位置-10px 2.绝对定位:
1.相对定位:
经典原样
> 箱子-和箱子3分别进行上移和下移
#first{
border: 1px dashed #1a3ebf;
background: #b39b9b;
/* 相对定位 距离某个位置偏移多少*/
position: relative;
top:-20px;
}
练习:
20.2绝对定位:
1.绝对定位: 基于xxx的定位 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留。 (1).没有父级元素定位的情况下，那么绝对定位相对于浏览器定位 (2).假设父级元素存在定位，那么会强制实现以父类作为定位 eg: position: absolute; right: 10px;
1.没有父级元素定位的情况下，那么绝对定位相对于浏览器定位
#two{
height: 50px;
border: 1px solid red;
background: #17bbbb;
position: absolute;
right: 10px;
}
2.假设父级元素存在定位，那么会强制实现以父类作为定位
20.3固定定位:fixed
1.固定定位: eg: position: absolute; bottom: 0; right: 0; position: fixed; 2.固定定位:是相对于浏览器固定的 3.绝对浏览器:是相对于浏览器（父类）固定的
21.图层(Z-Index)
1.图层操作:一层一层添加 优点: (1).就是在层级的基础上，把这个样板放在什么的层次上。（免添加背景的操作）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo3.css"> </head> <body> <div id="father"> <ul> <li><img src="../HTNL-CSS/image/7.jpg" alt="12"></li> <li class="tipText">微服务，找狂神</li> <li class="tipBg"></li> <li>时间:2099-10</li> <li>地点月球也好</li> t </ul> </div> </body> </html>
#father{ margin: 0; padding: 0; font-size: 12px; line-height: 25x; width: 358px; height: 552px; border: 1px solid red; } ul,li{ margin: 0; padding: 0; list-style: none; /*去远点*/ } .tipText,.tipBg{ position: absolute; width: 358px; top:400px; } .tipText{ color: white; /*层级*/ z-index: 999; }
22.背景透明度(opacity)
1.opacity: 0.5; 2.filter:Alpha(opacity=50); eg: .tipBg{ background: black; /*背景透明度*/ /*opacity: 0.5;*/ filter:Alpha(opacity=50); }
