具体分类position

position
1.relative—-相对定位
2.absolute—绝对定位
3.static—无定位
4.fixed—固定定位

相对定位

1.相对定位的偏移参数元素是元素本身，不会是元素脱离文档流，元素的初始位置占据的控件会被保留
2.position:relative
3.相对定位的偏移是自己之前的位置作为参照进行的一个偏移
4.相对定位不作为元素单独显示出来，卫视作为父容器去包含其他元素使用
5.子绝父相—子元素设置绝对定位，父元素设置相对定位

绝对定位

1.绝对定位对于一定为的最近的祖先元素，如果没有一定位的最近的祖先元素，那么她的位置就相对于最初的包含快（body）
2.position:absolute

相对定位和绝对定位的区别

作为父容器存在的时候，使用相对定位还是绝对定位

image.png

image.png

总结

子绝父相
**

绝对定位和浮动

相对定位和浮动

z-index的使用

1、层叠模式
2、案例代码演示
原始图片位置：
image.png

z-index后的效果图：
image.png

3、总结：

  1. 决定谁在前面，谁在后面，数字大小上不封顶
  2. 数值不适宜设置的过大，没意义。但是也适宜设置的过小，因为以后的页面的div很多，可以让他们一起重叠显示

固定定位

1、相对于浏览器窗口进行定位
2、position:fixed
3、案例代码演示
image.png

综合案例 — 购物车

1、效果图
image.png

购物车代码演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车</title>
  6.     <style type="text/css">
  7.         .div0{
  8.             background: rgba(0,0,0,0.5);
  9.             width: 800px;
  10.             height: 600px;
  11.             position: relative；/*设置定位*/
  12.             top: 40px;
  13.             left: 80px;
  14.         }
  15.         .div1{
  16.             background: red;
  17.             width: 600px;
  18.             height: 400px;
  19.             position: absolute;
  20.             top: 171px;
  21.             left: 100px;
  22.         }
  23.         .div2{
  24.             background: blue;
  25.             width: 50px;
  26.             height: 90px;
  27.             border-radius: 50%;
  28.             font-size: 40px;
  29.             text-align: center;
  30.             color: white;
  31.             position: absolute;
  32.             top: -10px;
  33.             left: -20px;
  34.             line-height: 89px;
  35.         }
  36.         img{
  37.             width: 50px;
  38.             height: 65px;
  39.             position: absolute;/*子随父动*/
  40.             bottom: 20px;
  41.             right: 100px;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="div0">
  47.         <div class="div1">
  48.             <div class="div2">5</div>
  49.             <div class="div3">
  50.                 <img src="cart.svg">
  51.             </div>
  52.         </div>
  53.     </div>
  54. </body>
  55. </html>