前端疑难困惑小笔记-3 巧用margin和定位达到特定网页效果

问题引入

逛电脑端淘宝的时候我们经常可以看到随着我们的鼠标移动 会出现这样的效果——

出现了一个框框！
如何做到这个框框 相信大家也都轻车熟路
使用ul li:hover;再设置边框的颜色
但是如果在盒子紧贴在一起的时候
我们如果只是简单地使用如上的方法
会出现什么样的效果呢？
我们简单举例来探索一下

举例探索

初步解决方法

使用如上代码 创造出紧贴在一起的几个盒子
当我们简单地添加

之后，效果——

诶。。蓝色边框没惹 那咋办嘛
利用定位 我们有两个手段来解决这个问题。

改进方法一

盒子没有定位——
鼠标经过的时候添加相对定位即可~
相对定位占有位置！一定要用相对定位 来压住其他标准流（或者浮动）的盒子~

改进方法二

盒子都有定位——
如果盒子给了一个相对定位怎么办呐。。

现在 每个盒子都是相对的了！
必须要加层级！
鼠标经过li时 将z-index设为1即可~

效果

通过方法一和方法二 效果是一样的
如下~

达成目的~