CSS 精准定位之position全面掌握

日期：2021-03-03 类型：科技新闻 

关键词：凡科自助建站，企业网站怎么建设，智能建站系统，自己建个网站，搭建网站基本步骤

在前端开发网页页面合理布局中，在同1平面上合理布局，大家大多数选用float特性来精准定位网页页面元素的部位。可是涉及到到弹出层、浮层、网页页面广告宣传软件这些，都必须CSS中的position特性来精准定位了，针对初学者来讲常常分不清楚楚是应当用position特性的absolute值、relative值、fixed值这些，下面大家就position特性基础的这3个值的用法做1些简易的详细介绍，期待对初学者一些协助。

1、position的absolute（肯定精准定位）

在这里position的absolute肯定精准定位大家分两类来说：

A：给元素界定了position:absolute，其父架构沒有界定任何position特性。此时的肯定精准定位便是相对网页页面4周最边沿来开展精准定位的，部位将根据访问器左上角的0点刚开始测算，肯定精准定位使元素与文本文档流不相干，因而不占有室内空间。元素的部位根据 "left", "top", "right" 和 "bottom" 特性开展要求。其部位不会受到父架构的危害，只以网页页面4附近缘刚开始测算。编码以下：

CSS Code拷贝內容到剪贴板
  1. <span style="color: #008000;"><!doctype html>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf⑻">   
  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⑻">   
  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（相对性精准定位） 

　　假如对1个元素开展相对性精准定位，最先它将出現在它所属的部位上。随后根据设定竖直或水平部位，让这个元素“相对”它的初始起始点开展挪动。（再1点，相对性精准定位时，不管是不是开展挪动，元素依然占有原先的室内空间。因而，挪动元素会致使它遮盖别的框）。

relative确实是相对自身来精准定位的,父DIV设定了position:relative 沒有得出值，它本身是沒有实际效果的
可是针对它的子元素起到了参考功效

3、position的fixed   fixed一直以body为精准定位时的目标，一直依据访问器的对话框来开展元素的精准定位，根据"left"、 "top"、 "right"、 "bottom" 特性开展精准定位。

有关position用法貌似也有许多，网编語言机构工作能力并不是太好，总结1下用法：

当你必须做1个有往下拉2级菜单实际效果时，父元素你必须position:relative，而里边的往下拉元素则必须position:absolute。

当你必须做1个网页页面漂浮的广告宣传，或做1个回到网页页面顶端按钮是，你必须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切成片专用工具获得精确的标值。

末了，网编在提示1句，假如你在你的父DIV里边的子DIV应用了position:absolute特性精准定位，而父DIV沒有做任何界定（父DIV里边早已被别的元素填充占有），还要想子DIV界定起到功效，这个情况下子DIV你能够无需left、top、right、bottom来界定，可使用margin-top、margin-left来界定，可是此种方式在ie6/7下和ie8/9/10/11、火狐、谷歌下面的部位是不1样的，对于ie6/7你必须用到css Hack，编码以下：

CSS Code拷贝內容到剪贴板
  1.  <span ><!doctype html>   
  2. <html>   
  3. <head>   
  4. <meta charset="utf⑻">   
  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⑻">   
  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全面掌握便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

上一篇：纯CSS仿迅雷看看蓝色导航栏 返回下一篇：没有了