让一个div悬浮在另一个div上

 今天在模仿京东的商品布局里遇到让一个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 { width: 150px; position: relative; height: 150px; border: 1px solid #000; background: #999; margin: 0 auto; }
.zj1, .zj2 { width: 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里设置了的 。最后效果如图：

可以看到最右边框已经被隐藏了。

posted @ 2013-03-29 17:34  红场小烟  阅读(5771)  评论(0)  编辑  收藏  举报