摘要：
　　这是艺灵带你轻松学会div+css的第十二节课：练习position定位属性。这节主要以实际场景练习为主。通过案例练习，让同学们对相对定位和绝对定位有进一步的理解。......

第十二节：练习position定位属性

1、案例一：在一张图片上添加左右箭头

demo效果：点我看全屏demo展示

接下来，我们用前面学的知识点就可以完成上面的这个案例了。不过呢？很多同学看到最终的效果后会突然懵了，感觉实现起来是不可能的事情或者是根本就不知道如何实现这样的一个效果。所以，我们接下来要做的第一件事情就是：思路分析！

1.1、思路分析

详细分析过程：
1.工具：dreamweaver编辑器一个；
2.素材上：一张背景图，一个左箭头图片，一个右箭头图片；
3.布局上面，我们需要将3张图片放到一个大的盒子里面原因：便于整体位置的移动；
4.css样式上面，我们会用到：宽度、高度、外补丁、定位这四个大的属性。

分析完后，我们就来愉快的码代码吧！

至于素材，网上一搜一堆，我们就直接从第三步开始。

1.2、html代码

<div>
　<img src="banner.jpg" alt="banner图" title="banner图"/>
　<img src="prev.png" alt="左箭头" title="左箭头"/>
　<img src="next.png" alt="右箭头" title="右箭头"/>
</div>

此时的效果图是这个样子的：　显然，与我们预期相像的差很远！怎么办呢？还能怎么办，上css啊！

话虽如此，但上面的代码也没有什么标识，css写起来有些鸡肋......

那我们把上面的代码稍微改进下，添加class选择符吧！

1.3、改进版html代码

<div class="banner">
　<img src="banner.jpg" alt="banner图" title="banner图" class="banner-img"/>
　<img src="prev.png" alt="左箭头" title="左箭头" class="banner-prev"/>
　<img src="next.png" alt="右箭头" title="右箭头" class="banner-next"/>
</div>

为了更直观的看到名叫.banner的div占位大小，我们给其添加一个边框属性。

1.4、添加边框属性

<!--嵌入式样式表-->
<style type="text/css">
/*添加边框属性，便于前台页面看效果*/
.banner{
　border:1px solid #f00;/*边框=宽1像素，实线，红色*/
}
</style>

此时再刷新页面可以看到效果了，配图：　

接下来，我们需要让这个.banner整体水平居中。

1.5、新增外补丁让其居中

margin:0 auto;/*外补丁=上下0，左右自动*/

此时我们再刷新页面是看不到效果的。为什么会这样？

原因：此时，我们的.banner宽度等于浏览器的宽度，所以外补丁不生效。解决的方法：给.banner设置宽度。

那宽度是多少呢？

这个宽度取决于里面的.banner-img的宽度。因为我们是要让.banner-img完全显示。

1.6、新增宽度

width:520px;/*宽度=520像素*/

此时再刷新页面，可以看到已经水平居中了。配图：　接下来我们调整箭头的位置。如何让箭头到图片上面去呢？

解决方法：绝对定位实现

1.7、定位属性

/*箭头公用部分*/	
.banner-prev,.banner-next{	
　position: absolute;/*绝对定位*/	
　top:50%;/*距离上边=50%*/	
　margin-top:-14px;/*此处的负值是为了让元素在垂直方面上居中,需要配合top:50%使用；取值=-高度/2*/	
}	
/*右箭头*/	
.banner-next{	
　right:0;/*距离右边=0像素*/	
}

此时我们再刷新页面，可以看到箭头在图片上了。配图：　细看就会发现右箭头跑外面去了。这是为什么呢？

原因：前面我们说了，绝对定位的元素父级没有设置relative或absolute或fixed时是以浏览器(body)为参照物的。

所以，如果我们想上右箭头乖乖到图片上，这个.banner就需要添加相对定位属性。肯定会有同学问为什么不是绝对定位，如果有此疑问，请看上一节的课程。

1.8、.banner新增相对定位

position: relative;/*相对定位*/

再刷新页面就可以看到右箭头到图片上了，并且与我们的案例demo完全一致了。配图：　此时我们再去掉边框属性就ok了。

在上面的代码中，左右箭头定位这一块儿实际上有一个小坑，虽然案例中未展现出来，但还是值得提出来的。

2、取值失效的原因及解决方法

我们修改需求，现在左箭头太靠左了，我们让他距离左边10px。

2.1、新增left

/*箭头公用部分*/	
.banner-prev,.banner-next{	
　left:10px;/*距离左边=10px*/	
}

此时刷新页面惊呆了！左箭头怎么不见了？右箭头怎么不在右边？配图：这时我们会发现right:0并没有生效，并且还把左箭头搞没见了......

原因：1.左箭头实际上在右箭头的下面。由于定位元素没有设置深度(z-index)属性，默认是后面的大于前面的，深度值越在，越在上面。2.右箭头此时的方位值是这样的：left:10px;right:0，由于遵循左有值且非auto时优先于右，上有值且非auto时优先于下的原则，所以会显示在左边！

解决方法有多种，比如说：我们只给.banner-prev添加left:10px，或者是给.banner-next新增一个left:auto也能解决问题。

有关z-index和值优先的问题，请参见demo:点我看全屏demo展示

讲完坑点后，我们再来学习一个新的知识点：元素垂直居中，这个在工作中会经常用到，所以下面会详细的解释下这个知识点。

3、元素垂直居中

什么是垂直居中呢？

我们可以这样理解：某一元素距离上边的值等于距离下边的值。如果转换成数学形式的话，就是：一个线段的中点位置。

此时，部分同学已经明白了。但要用我们的css表现出来，难道是这样：left:100px;bottom:100px？？？

显示，这种方法是错误的！我们暂且不说为什么会错，我们来思考一个问题吧。

在1280*720的分辨率下，我们成功的给一个元素进行了垂直方向上的居中；当把分辨率修改成1366*768时，我们是不是又要计算一次值？如果再换个分辨率呢？是不是又得计算？？？关键是：你怎么确定用户的分辨率是多大？？？

所以，这种方法显然不可取！那怎么办呢？

解决方法：外补丁负值+定位。

3.1、元素居中万能公式

/*垂直方向上*/	
position:absolute;top:50%;margin-top:-(h/2)px;/*说明：h表示元素自身的高度并且此高度值的必须是px！*/
/*水平方向上*/	
position:absolute;left:50%;margin-left:-(w/2)px;/*说明：w表示元素自身的宽度并且此宽度值的必须是px！*/

这个就是我们的万能公式，一试一个准哦！至于原理，请看图解：

我们常说的1920全屏，实际上就是：position:absolute;left:50%;margin-left:-960px;/*(-1920/2)px*/

就是这么简单！肯定会有同学之前复制过此段类似的代码粘贴到自己的淘宝店铺中，然后看到没效果就说代码没用之类的话语。

真相：请悉知：淘宝早已过滤了margin的负值！！！至于淘宝的写法，可参考之前的文章→→纯css实现超宽图片全屏居中（兼容淘宝店铺），这里不再赘述。

本节课程到此结束。这节课中的知识点还是比较多的，并且在日常工作中，坑是一个接一个，同学们要加强练习哦！

4、录制视频

标题：艺灵带你轻松学会div+css12练习position定位属性

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/39651818.swf
优酷：http://player.youku.com/player.php/sid/XMTU5NjA2NDM0NA==/v.swf
土豆：http://www.tudou.com/v/zWtzeiXSo-I/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=n03042s1ws8&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-06-12/415.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。