2017.9.26 div覆盖

分享人：陈孚楠

div覆盖：绝对定位与相对定位

image.png

image.png

涉及两个div层，一个div里放了个“vedio”标签(下称div1)，另一个div用来作覆盖(下称div2)。

.div1{
           position: absolute; 
}

.coverDiv1 {
            position: relative;
            top: 715px;  
            left: 1145px;
            width: 60px;
            height: 50px;
            background-color: white;
        }

Absolute：绝对的 类似与物理中的参照物
Relative：相对的
Top，left 都是相对的偏移（相对与参照物）
当然我们也可以使用绝对定位，即绝对于屏幕。

.xxx{
        position:fixed;   
        top:100px;        
        left:1500px;     
}

顾名思义

fixed：固定。默认位置为屏幕左上角
top，left 同上为相对偏移（相对与屏幕左上角）

div基本样式

border: 1px solid #f0000;对应为边框线的宽度，样式（实线，虚线等），颜色
-webkit-transform: rotate(-15deg); div倾斜 数字表示角度。
border-radius: 15px; 圆边角

image.png

-moz-box-shadow: 2px2px10px#FF3333;
-webkit-box-shadow: 2px 2px 10px #FF3333;
box-shadow: 2px 2px 10px #FF3333; 实现透明阴影效果

image.png

Div并排显示： display:inline;或者用float 或者用上面的定位的方法。