关于定位position的一些方法.设置position又想居中？

这是效果图。我们看到商品的图片不是规则的。

你常规的切图是方形我们的做法是：把整条行的图片切出来作为背景图。在上面写两个a标签。

<div class="phoneDiv">
<div class="wid">
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59938.html" target="_blank" class="posa"></a>
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59944.html" target="_blank" class="posa2"></a>
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59958.html" target="_blank" class="posa3"></a>
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59945.html" target="_blank" class="posa4"></a>
</div>

</div>

.phoneDiv {
position: relative;

background: url(../img/a.png) no-repeat
top center; //缩小的时候会从中间和上面缩。

background-size: cover;

height: 648px;

}

img {

   border: 0;

   vertical-align: top;
   width: 100%;

  min-width: 1000px;

}
.wid{width:1200px;margin:0 auto;min-width:1000px;}

.phoneDiv{

position: absolute;
z-index: 1;
display: block;
width: 14.9479%;
height: 56.06299%;
top: 22.20472%;
left: 18.90625%;

}

通过距离左边的距离来调整每个图片的位置

  .posa2 {

  left:34.9479166%;

 } 

.posa3 {

  left:50.729166%;

 } 

.posa4 {

  left:66.71875%;

 } 

就下面的这种效果图：



但是像上面那种不规则的怎么办？

首先你可以看我的切图，我把横着切得图，保留上面图的完整。下面的可以截断。


这样我们在设置高度的时候下面的可以通过margin-top:-1000px;负数值来使它往上面走。而一旦你把上面的切了，上面的无论如何高度也不够，你通过padding-top也不行的。

还有就是我们把整个图作为背景图。如果保证你的a标签始终在屏幕的中间呢？

<div class="blue1">
<div class="a">
<a href="" class="left"></a>
<a href="" class="right"></a>
</div>

</div>

我在这里加了一个a标签。你可以在这个class=a里面设置position或者像上面例子一样在具体的那个a标签里面加。两处只要加一个地方就可以啦。

.a{

 width:1500px;

margin:0 auto;

position:absolute;//在这里就有冲突了，你一旦设置position他的margin:0 auto这样居中了。这样你可以通过left:50%;margin-left:负值来调整位置使它在中间。

left:50%;

margin-left:-550px;

}

.blue2 .a .left{width:32%;height:627px;margin-top:0px;}     

.blue2 .a .right{width:58%;height:360px;float:right;margin-top: 143px;}