【技术】把图浮在其它div层上

想把“心形图片”浮在相框之上，产生交错，方法：

一， 1号、2号、3号、4号是四个图片，正确写法如下，可兼容IE7，IE8，ff 。

<div class="user-photo fl">
     <ul>
      <li class="fl">
       <div class="user-number"><img src="images/no1.gif" /></img>
       </div>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
      <li>
       <div class="user-number"><img src="images/no2.gif" /></img>
       </div>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
      <li>
       <div class="user-number"><img src="images/no3.gif" /></img>
       </div>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
      <li>
       <div class="user-number"><img src="images/no4.gif" /></img>
       </div>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
     </ul>
    </div>

在html中给1号-4号图定义class="user-number"，在css里写

.user-number{
margin-top: -30px;
margin-left: -15px;
position: absolute;}

 

二， 1号、2号、3号、4号是一个图片，写法如下，此方法不能兼容IE7 。

1号-4号在同一张图上，一个div里，

<div class="user-number1"><img src="images/no1-4.gif" /></img>
</div>

 

四个相框在一个div里，

<div class="user-photo fl">
     <ul>
      <li class="fl">
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
      <li>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
      <li>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
      <li>
       <div class="photo"><img src="images/photo-frame.gif" /></img>
       </div>
       <div class="user-vote fl">
        <div class="user-name fl">
         <p><span>人名字</span></p>
        </div>
        <div class="user-vote_num fr">
            <a class="cast-vote" href="#">
                <img src="images/cast-vote.gif"></img>
            </a>
            <p class="fr unit fc">
                <span>票</span>
            </p>
        </div>
        <div class="number fr">
         <p class="fr fc"><span>219</span></p>
        </div>
       </div>
      </li>
     </ul>
    </div>

 

在html中给1号-4号图定义class="user-number1"，在css里写

.user-number1{
margin-top: 30px;
margin-left: 5px;
width: 815px;
height: 59px;
position: absolute;}