讓一個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里設置了的 。最后效果如圖:

可以看到最右邊框已經被隱藏了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM