首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS 定位之position全面了解

所属分类： 网页制作 / CSS 阅读数： 402
收藏 0 赞 0 分享

在前端网页布局中，在同一平面上布局，我们大都采用float属性来定位网页元素的位置。但是涉及到弹出层、浮层、页面广告插件等等，都需要CSS中的position属性来定位了，对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等，下面我们就position属性基本的这三个值的用法做一些简单的介绍，希望对初学者有些帮助。

1、position的absolute（绝对定位）

在这里position的absolute绝对定位我们分两类来讲：

A：给元素定义了position:absolute，其父框架没有定义任何position属性。此时的绝对定位就是相对于页面四周最边缘来进行定位的，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置不受父框架的影响，只以页面四周边缘开始计算。代码如下：

CSS Code复制内容到剪贴板
  1. <span style="color: #008000;"><!doctype html>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf-8">   
  5. <title>position</title>   
  6. <style type="text/css">   
  7. .demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
  8. .all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}   
  9. </style>   
  10. </head>   
  11.     
  12. <body>   
  13. <div class="all">   
  14. <div class="demo">   
  15. position:absolute;<br />   
  16. left:100px;<br />   
  17. top:200px;<br />   
  18. </div>   
  19. </div>   
  20. </body>   
  21. </html>   
  22. </span>    

效果如下图：

B：给元素定义了position:absolute，其父框架定义了position:absolute\position:relative\position:fixed属性。此时的绝对定位就是相对于父框架最边缘最边缘来进行定位的，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置只在父框架内做变化，代码如下：

CSS Code复制内容到剪贴板
  1. <span style="color: #008000;"><!doctype html>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf-8">   
  5. <title>position</title>   
  6. <style type="text/css">   
  7. .demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
  8. .all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}   
  9. </style>   
  10. </head>   
  11.     
  12. <body>   
  13. <div class="all">   
  14. <div class="demo">   
  15. position:absolute;<br />   
  16. left:100px;<br />   
  17. top:200px;<br />   
  18. </div>   
  19. </div>   
  20. </body>   
  21. </html>   
  22. </span>    

效果如下图

所以，如果页面元素的定位，想要定义在父元素内，而不受显示器分辨率，浏览器窗口大小等限制时，建议采用B种方案。

2、position的relative（相对定位） 

　　如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）。

relative的确是相对于自己来定位的,父DIV设置了position:relative 没有给出值，它自身是没有效果的
但是对于它的子元素起到了参照作用

3、position的fixed   fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

关于position用法貌似还有很多，小编语言组织能力不是太好，总结一下用法：

当你需要做一个有下拉二级菜单效果时，父元素你需要position:relative，而里面的下拉元素则需要position:absolute。

当你需要做一个页面漂浮的广告，或者做一个返回页面顶端的按钮是，你需要position:fixed。

通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。
在绝对定位时候我们可以使用css z-index定义css层重叠顺序。
同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。

末了，小编在提醒一句，如果你在你的父DIV里面的子DIV使用了position:absolute属性定位，而父DIV没有做任何定义（父DIV里面已经被其他元素填充占据），还想要子DIV定义起到作用，这个时候子DIV你可以不用left、top、right、bottom来定义，可以使用margin-top、margin-left来定义，但是此种方法在ie6/7下和ie8/9/10/11、火狐、谷歌下面的位置是不一样的，针对ie6/7你需要用到css Hack，代码如下：

CSS Code复制内容到剪贴板
  1.  <span ><!doctype html>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf-8">   
  5. <title>position</title>   
  6. <style type="text/css">   
  7. .demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
  8. .all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}   
  9. </style>   
  10. </head>   
  11.     
  12. <body>   
  13. <div class="all">   
  14. <img src="1.jpg" width="600" height="600" />   
  15. <div class="demo">   
  16. position:absolute;<br />   
  17. margin-left:100px;<br />   
  18. margin-top:200px;<br />   
  19. </div>   
  20. </div>   
  21. </body>   
  22. </html>   
  23. </span>   

效果如下图

使用CSS Hack之后  代码：

CSS Code复制内容到剪贴板
  1.   
  2.   
  3.  <span ><!doctype html>   
  4. <html>   
  5. <head>   
  6. <meta charset="utf-8">   
  7. <title>position</title>   
  8. <style type="text/css">   
  9. .demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}   
  10. .all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}   
  11. </style>   
  12. </head>   
  13.     
  14. <body>   
  15. <div class="all">   
  16. <img src="1.jpg" width="600" height="600" />   
  17. <div class="demo">   
  18. position:absolute;<br />   
  19. margin-left:100px;<br />   
  20. margin-top:200px;<br />   
  21. </div>   
  22. </div>   
  23. </body>   
  24. </html>   
  25. </span>   

在各个版本的浏览器下的  效果如下

此种方法最好不要使用   在不同版本浏览器下需要来回的用CSS Hack调整！

以上这篇CSS 定位之position全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/08/5652236.html

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介：在这篇文章里，我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程，该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识。当然，我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介：如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介：Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介：网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之 首先声明： 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外） 解决：写全单位如padding:0px; 2、水平居中 问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序，刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22