本文主要是介绍布局技巧-margin负值运用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1,让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
2,鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)
加相对定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid #00B057;margin-left: -1px;}ul li:hover {position: relative;border: 1px solid #0072C6;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li></ul></body>
</html>
加z-index
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid #00B057;margin-left: -1px;}ul li:hover {z-index: 1;border: 1px solid #0072C6;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li></ul></body>
</html>
这篇关于布局技巧-margin负值运用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!