最终效果如下
为了避免相邻的盒子边框宽度叠加,所有盒子float: left;,出现了以下问题(有的盒子的边框被挡住了)
重点来了 -- 定位的灵活运用(除了static),当鼠标移入盒子后,提高盒子的层级,可以轻松实现效果
- 1.情况一:直接给盒子一个
相对定位!绝对定位是不行的,因为绝对定位的盒子不占有原来的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>淘宝列表</title>
<style type="text/css" media="screen">
.item {
height: 300px;
130px;
border: 2px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -2px;
}
.item:hover {
border: 2px solid red;
position: relative; /* 绝对定位或者相对定位的盒子层级要比没有定位的盒子高 */
}
</style>
</head>
<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</body>
</html>
![]()
- 情况二:当盒子里面的子元素有绝对定位的时候,
子绝父相,情况一就不适用了.可以通过z-index值来提高层级关系
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>淘宝列表</title>
<style type="text/css" media="screen">
.item {
height: 300px;
130px;
border: 2px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -2px;
position: relative;
}
.item:hover {
border: 2px solid red;
z-index: 1; /* 子绝父相的情况下,盒子已经是相对定位了,可以通过z-index值来提高层级关系 */
}
</style>
</head>
<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</body>
</html>