接下来我们通过相对定位和绝对定位来实现网易云音乐首页的item，如下图所示：
该例中耳机图标、播放量以及播放图标都是盖在图片上的，这里需要通过相对定位和绝对定位来处理；相对定位是相对于自身位置进行偏移，适合元素位置微调，并且不会脱离标准流；绝对定位是相对于父级定位元素进行偏移，是脱离标准流的。
下面我们就来实现这个item。
网易云音乐首页的item基本结构是由上下两部分组成的，上半部分为封面、背景以及播放量等信息，下半部分为描述信息，可以通过一个div嵌套两个div来实现上下结构，具体HTML代码如下：
接着通过浏览器的检查工具来查看item的宽高信息，具体如下：
.item{/*设置宽度，高度为auto*/width:140px;/*让块级元素居中显示*/margin:0auto;}刷新HTML页面，添加宽度和居中的基本样式后效果如下：
宽度和居中设置均已生效。
官网上每个item上其实都有一个背景，如下图所示：
我们也可以通过浏览器的检查工具看到，如下图所示：
原样式中的背景是通过给一个超链接设置背景来实现的。
dic.top盒子没有设置高度，宽度会自动占满父元素的整行，高度是由里面的img元素给撑起来的，我们可以宪哥div.top设置一个背景颜色，具体代码如下：
可以看到div.top的高度虽然是由img撑起来的，但是img的高度并不等于div.top的高度，底部还有一点点大约5px的高度。
这种现象是由于vertical-align产生的，该属性的默认值是baseline，可以设置为top来将图片下面多处的区域去除，具体CSS代码如下：
.item.topimg{vertical-align:top;}刷新浏览器，效果如下：
底部多出的区域消失了，设置之后img和div.top的高度都变成了140px，图片就占据了整个盒子的高度。
也可以通过将img元素设置为display:block;来去除底部多余的高度：
.item.topimg{/*vertical-align:top;*/display:block;}刷新浏览器，效果如下：
原样式中是通过给一个a元素设置background来实现给图片上再盖上一层背景图片的：
我们可以现在img元素的后面增加一个div.cover，并给它设置宽高和背景颜色，具体代码如下：
我们可以通过定位将div.cover盖在img上面，先给div.cover设置绝对定位，具体代码如下：
/*封面背景样式*/.item.top.cover{width:140px;height:140px;background-color:rgba(0,0,0,.5);position:absolute;}刷新浏览器，效果如下：
再给div.top设置相对定位，形成子绝父相，具体CSS代码如下：
.item.top{/*background-color:#f00;*/position:relative;}上一节内容中提到如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置如下属性：
left:0;right:0;top:0;bottom:0;margin:0;
如果我们想要div.cover能完全盖在img上，此时就要设置定位元素div.cover的宽高与定位参照对象div.top一样；增加如下设置：
/*封面背景样式*/.item.top.cover{width:140px;height:140px;background-color:rgba(0,0,0,.5);position:absolute;top:0;right:0;bottom:0;left:0;}刷新浏览器，效果如下：
可以看到div.cover已经完全盖在img上了，原样式中这个cover是一个超链接，因此就可以将div.cover改为a.cover，在给a.cover设置了绝对定位也就拥有了inline-block元素的特性了，将封面背景的HTML代码修为如下形式：
保存这个图片并命名为coverall，将a.cover样式中的背景颜色替换为背景，具体代码如下所示：
/*封面背景样式*/.item.top.cover{width:140px;height:140px;/*background-color:rgba(0,0,0,0.5);*/background:url(../images/coverall.png)no-repeat;background-position:0,0;position:absolute;top:0;right:0;bottom:0;left:0;}