position定位案例

使用position定位实现鼠标移动滑出效果

先使用一个父级元素将背景和划出的区域包裹

为三个元素设置同样宽高，之后为父元素设置overflow：hidden属性，遮罩层属于溢出部分进行隐藏，然后为遮罩层定位到背景的下面，因为设置了overflow：hidden属性，现在是看不到的，

使用hover伪元素触发遮罩：设置父级wrapper position：relative设定为遮罩的定位祖先元素，遮罩层msk设置position：absolute触发时设置定位到父元素的top：0 位置 ，

transition可以设置过度时间

效果图 鼠标滑过 代码

当鼠标划过时遮罩层进行定位到top：0的位置，实现滑动效果

使用position定位以及透明度实现画面淡出效果

设置同等宽高，使遮罩层定位到和需要遮罩的相同位置，设置透明度为0， 使用hover伪元素对其设置需要的透明度