艺灵设计

全部文章
×

相对定位与绝对定位

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-10-26 14:25:19 - 阅: - 评:0 - 积分:0

position定位是网站中常常用到的,网站因定位而变得更加灵活多变。当我们想展现层次感的网站时,position定位绝对是首选。position有多个取值,用的最多的要数relative和absolute了,fixed在特殊情况下才会用到,但要配合js来实现兼容ie6。接下来就详细的分析下相对定位与绝对定位在应用中要注意的一些问题及技巧。

先来说相对定位,即:position:relative;。下面有一个案例,我们先来看一下吧。源码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>相对定位relative--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{margin:0;padding:0}
  9. body{font-size:14px;}
  10. .wrap{width:500px;height:350px;margin:0 auto;border:1px solid #f00;}
  11. .po_r{position:relative;background:#ccc}
  12. .po_a{position:absolute;background:#999}
  13. .fl{float:left}
  14. div{width:200px;height:100px;margin:0 auto;border:1px solid #f00;}
  15. p{line-height:24px;text-indent:24px;padding:0 5px;border:1px solid #f00;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="wrap">
  20. <p>大家好!我是p标签,在我后面有2个div标签,一个添加了相对定位属性,即:position:relative;另一个是正常的div。下面来看一下他们处理正常文档流中的位置。</p>
  21. <div class="po_r">大家好,我叫:po_r,我是相对定位。position:relative</div>
  22. <div>大家好,我叫:.one,我是正常的div</div>
  23. <p>大家好!我还是p标签,在我前面有2个div,他们都遵循了正常的文档流布局。</p>
  24. </div>
  25. </body>
  26. </html>

展示的效果图如下: 

从上图中我们看到上面的标签结构是:外面一个名叫“.wrap”的div,里面是2个p标签和2个div标签,顺序是p→.po_r→.one→p。这个名叫“.po_r”的div在没有给它设置top;right;bottom;left这4个方位属性时仍然占据着正常的位置。下面来给“.po_r”设置下方位看结果会是怎么样。我们只添加left:30px;top:50px;这2个属性吧,源码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>相对定位relative2--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{margin:0;padding:0}
  9. body{font-size:14px;}
  10. .wrap{width:500px;height:350px;margin:0 auto;border:1px solid #f00;}
  11. .po_r{position:relative;background:#ccc;left:30px;top:50px;}
  12. .po_a{position:absolute;background:#999}
  13. .fl{float:left}
  14. div{width:200px;height:100px;margin:0 auto;border:1px solid #f00;}
  15. p{line-height:24px;text-indent:24px;padding:0 5px;border:1px solid #f00;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="wrap">
  20. <p>大家好!我是p标签,在我后面有2个div标签,一个添加了相对定位属性,即:position:relative;另一个是正常的div。下面来看一下他们处理正常文档流中的位置。</p>
  21. <div class="po_r">大家好,我叫:po_r,我是相对定位。position:relative;left:30px;  top:50px;</div>
  22. <div>大家好,我叫:.one,我是正常的div</div>
  23. <p>大家好!我还是p标签,在我前面有2个div,他们都遵循了正常的文档流布局。</p>
  24. </div>
  25. </body>
  26. </html>

展示的效果图如下: 

这里我们只可以看到:虽然名叫“.po_r”的div跑到了名叫“.one”的div的上面,但是紧跟在“.po_r”后面的“.one”并没有因此而向上移动。也就是说:尽管方位可以改变相对定位的位置,但仍占据原来的空间。

下面来给“.po_r”添加浮动,即:float:left;记得要及时清除浮动,否则会影响后面的标签。源码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>相对定位relative添加浮动--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{margin:0;padding:0}
  9. body{font-size:14px;}
  10. .wrap{width:500px;height:350px;margin:0 auto;border:1px solid #f00;}
  11. .po_r{position:relative;background:#ccc;left:30px;top:50px;}
  12. .po_a{position:absolute;background:#999}
  13. .fl{float:left}
  14. div{width:200px;height:100px;margin:0 auto;border:1px solid #f00;}
  15. p{line-height:24px;text-indent:24px;padding:0 5px;border:1px solid #f00;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="wrap">
  20. <p>大家好!我是p标签,在我后面有2个div标签,一个添加了相对定位属性,即:position:relative;另一个是正常的div。下面来看一下他们处理正常文档流中的位置。</p>
  21. <div class="po_r fl">大家好,我叫:po_r,我是相对定位。position:relative;left:30px; top:50px; float:left;</div>
  22. <div style="clear:both;height:0;border:0;font-size:0"></div>
  23. <div>大家好,我叫:.one,我是正常的div</div>
  24. <p>大家好!我还是p标签,在我前面有2个div,他们都遵循了正常的文档流布局。</p>
  25. </div>
  26. </body>
  27. </html>

展示的效果图如下: 

添加浮动后我们可以看到,“.po_r”虽然继承的浮动属性,但仍占据自己原来的空间。

下面来给“.po_r”添加绝对定位,即:position:absolute;。源码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>绝对定位absolute--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{margin:0;padding:0}
  9. body{font-size:14px;}
  10. .wrap{width:500px;height:350px;margin:0 auto;border:1px solid #f00;}
  11. .po_r{position:relative;background:#ccc;left:30px;top:50px;}
  12. .po_a{position:absolute;background:#999}
  13. .fl{float:left}
  14. div{width:200px;height:100px;margin:0 auto;border:1px solid #f00;}
  15. p{line-height:24px;text-indent:24px;padding:0 5px;border:1px solid #f00;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="wrap">
  20. <p>大家好!我是p标签,在我后面有2个div标签,一个添加了相对定位属性,即:position:relative;另一个是正常的div。下面来看一下他们处理正常文档流中的位置。</p>
  21. <div class="po_r fl po_a">大家好,我叫:po_r,我是绝对定位。position:absolute;left:30px; top:50px; float:left </div>
  22. <div>大家好,我叫:.one,我是正常的div</div>
  23. <p>大家好!我还是p标签,在我前面有2个div,他们都遵循了正常的文档流布局。</p>
  24. </div>
  25. </body>
  26. </html>

展示的效果图如下:relative添加absolute后.png

此时我们可以看到,“.po_r”已经突破了文档流,直接跑到“.wrap”外面去了,紧跟着他后面的“.one”占据了原“.po_r”的位置。我们还可以发现,虽然“.po_r”设置有浮动属性,但是此浮动并没有生效。也就是说:绝对定位的级别要高于浮动!

虽然浮动不能影响到绝对定位,但浮动里的margin负值却可以影响到绝对定位。典型的例子就是全屏banne图的应用,详情可参见本站的《纯css实现超宽图片全屏居中(兼容淘宝店铺)》一文。

下面再来看看两个相对定位的组合效果:

下面再来看看两个绝对定位的组合效果:

下面再来看看一个相对与一个绝对定位的组合效果:

上面5幅图很直观的反映出相对定位,绝对定位以及浮动之间的关系。有些初学者一直搞不清楚什么时候用相对定位,什么时候用绝对定位,至于这种情况,建议初学者先看看手册中的详细说明,然后自己做几个例子好好研究下就知道了。当然,如果初学者能够从洒家的5幅图中彻底弄明白,这也不枉洒家写这篇文章了。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/div/2013-10-26/105.html

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

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 相对定位 绝对定位 浮动 负值

上一篇: 报刊中常用的首字下沉效果   下一篇: 谈谈初学者应该如何学习div

评论区