您现在的位置是：网站首页> 编程资料编程资料

CSS 定位之position全面了解CSS属性之定位属性（图文详解）css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)CSS position属性和实例应用演示css position定位属性_动力节点Java学院整理 css中的三种基本定位机制CSS的position定位和float浮动详解CSS3定位和浮动详解深入理解CSS定位与层叠CSS定位的教程

2021-09-05 1232人已围观

简介 下面小编就为大家带来一篇CSS 定位之position全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在前端网页布局中，在同一平面上布局，我们大都采用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. "color: #008000;">   
  2.   
  3.   
  4. "utf-8">   
  5. </span><span class="keyword">position</span><span>   
  6. "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.   
  10.   
  11.     
  12.   
  13. "all">   
  14. "demo">   
  15. position:absolute;   
  16. left:100px;   
  17. top:200px;   
  
    •   
  •   
  •   
  •     

    • 效果如下图：

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

    CSS Code复制内容到剪贴板
    1. "color: #008000;">   
    2.   
    3.   
    4. "utf-8">   
    5. </span><span class="keyword">position</span><span>   
    6. "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.   
    10.   
    11.     
    12.   
    13. "all">   
    14. "demo">   
    15. position:absolute;   
    16. left:100px;   
    17. top:200px;   
      
    •   
  •   
  •   
  •     

    • 效果如下图

    所以，如果页面元素的定位，想要定义在父元素内，而不受显示器分辨率，浏览器窗口大小等限制时，建议采用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多少层结构，都将会被拖出以为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成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.     
    2.   
    3.   
    4. "utf-8">   
    5. </span><span class="keyword">position</span><span>   
    6. "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.   
    10.   
    11.     
    12.   
    13. "all">   
    14. src="1.jpg" width="600" height="600" />   
    15. "demo">   
    16. position:absolute;   
    17. margin-left:100px;   
    18. margin-top:200px;   
      
    •   
  •   
  •   
  •    

    • 效果如下图

    使用CSS Hack之后  代码：

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.     
    4.   
    5.   
    6. "utf-8">   
    7. </span><span class="keyword">position</span><span>   
    8. "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.   
    12.   
    13.     
    14.   
    15. "all">   
    16. src提示： 本文由神整理自网络，如有侵权请联系本站删除！
      本站声明：
      1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
      2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

      上一篇：css3media响应式布局实例详解使用CSS3的@media来编写响应式的页面 css3 media 响应式布局的简单实例css3的@media属性实现页面响应式布局示例代码详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

      下一篇：CSS3制作圆角图片和椭圆形图片Css3圆角边框制作代码CSS的一些圆角图形实例分享CSS3绘制圆角矩形的简单示例使用css实现圆角图形绘制纯CSS实现圆角折叠菜单的方法CSS实现反方向圆角的示例代码

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网