今天在模仿京东的商品布局里遇到让一个div悬浮在另一个div中的问题。即达到这样的效果。
其中最大的div是 styleshouji ,悬浮的div有两个，包含图片的名为 p-img p-img-sys 包含文字与价格的名为 p-detail。
<ul class="style1shouji" > <!-- TemplateBeginEditable name="平板电脑" --> <!-- #BeginLibraryItem "/library/firsthot.lbi" --> <!-- {if $firsthot_list} --> <!--{foreach from=$firsthot_list item=auction}--> <li> <div class="p-img p-img-sys" style="opacity: 1;height:110px; position:relative; margin: 0 auto;"> <a href="{$auction.url}" target="_blank"><img src="{$auction.thumb}" alt="{$auction.goods_name|escape:html}" width="110" height="110" style="float:right"></a> </div> <div class="p-detail" style="display:inline"> <div class="p-name"> <a href="{$auction.url}" title="{$auction.goods_name|escape:html}" target="_blank">{$auction.short_style_name|escape:html}</a> </div> <div class="p-price"> <span style="font-size:14px; font-family:Verdana; color:#CC0000"><strong>{$auction.formated_start_price}</strong></span> </div> </div> </li> <!--{/foreach}--> <!-- {/if} --> <!-- #EndLibraryItem --> <!-- TemplateEndEditable --> </ul>
其中css是这样写的
.style1shouji li { width:225px; height:130px; position:relative; border-right:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; float:left; } .style1shouji li .p-detail { position: absolute; left:20px; top: 20px; } .style1shouji li .p-img p-img-sys{ height:110px; position:relative; }
将背景div作相对定位，悬浮的图片作相对定位，悬浮的文字div作绝对定位即可。
参考这个例子：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>绝对定位相对定位</title>
<style>
* { margin: 0; padding: 0; }
.fj1 { 150px; position: relative; height: 150px; border: 1px solid #000; background: #999; margin: 0 auto; }
.zj1, .zj2 { 50px; height: 50px; position: absolute; right: -20px; top: 20px; border: 1px solid #F00; background: #FFF; z-index: 3 }
.zj2 { right: -50px; top: 40px; z-index: 4; background: #903; border: 1px solid #093; }
</style>
</head>
<body>
<div class="fj1"> 我在下面
<div class="zj1">我浮动在上面</div>
<div class="zj2">我浮动最上面</div>
</div>
</body>
</html>
效果如图：
另外发现另一个问题。在一个li中显示下边框与右边框时，最后一个右边框会和右边已有的边框线重复。如图最右边
如何解决这个问题呢？方法是将 li的宽度变大1个像素，这样第3个边框则会在整个ul之外了就可以不显示了。代码如下
.style1shouji{ width:900px; } .style1shouji li { width:226px; height:130px; position:relative; border-right:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; float:left; }
给 style1shouji设置一个比较大的宽度是因为当你将li的宽度由225px变成226px时会变形。外部div中设置 overflow:hidden;就可以了。 但是这里style1shouji并没有设置那是因为它外部的div里设置了的 。最后效果如图：
可以看到最右边框已经被隐藏了。