Css中Position定位详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Css中Position定位详解相关的知识，希望对你有一定的参考价值。
参考技术A Position属性确认元素的定位static 是默认定位值，它的定位元素不受top、left、right、bottom的影响，也就是说你给元素设置这四个属性的任何值都没有效果
relative 相对定位，设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。
比如说在做表单布局的时候，有时候label的值并没有和输入框上下居中对齐，它有一点点偏下，效果不是很好看，这个时候我们可以给label向上设置一下偏移让他们居中对齐
absolute 是绝对定位，绝对定位的元素相对于最近的定位祖先元素进行定位，如果没有定位祖先元素，那么就按body定位
absolute最典型的例子就是结合relative一块完成效果，比如我有一个p，它是在页面居中的，但是它的宽度和高度是动态的，我们还有一个span标签希望永远在这右下角10px的位置，这个时候我们就可以利用absolute完成
fixed 是相对视口定位的，简称浮云定位，这个意味着就像你滚动页面，它始终位于同一个位置，top、left、right、bottom用于设置当前元素的位置。
常用的例子就是页面右下角，滚动到顶部的的功能，我们可以对这个元素设置fixed浮动定位，当用户一直向下滚动浏览网页后，想一下子回到顶部，它只要点这个元素就行了，因为之个元素是浮云定位，所以永远是在用户可视范围的右下角
css position 详解
仅供自己参考使用。
position 有四个值
（1）absolute:
以下时w3c中的描述：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
对以上横线处有不解之处。以下代码对第二个<span>标签设置了position:absolute属性，thank you 也按照预期的展示了。如图1
1 <!doctype html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"> 5 5 <script type="text/javascript" src="js/jquery.js"></script> 6 6 7 7 <style> 8 8 html,body{ 9 9 width: 100%; 10 10 height: 100%; 11 11 margin: 0px; 12 12 padding: 0px; 13 13 background-color: pink; 14 14 overflow: hidden; 15 15 } 16 16 </style> 17 17 <script type="text/javascript"> 18 18 $(function(){ 19 19 $("span:last").css({ 20 20 "position":"absolute", 21 21 "left":"200px", 22 22 "top":"100px", 23 23 "background-color":"red" 24 24 }); 25 25 var a = "a"; 26 26 }); 27 27 </script> 28 28 29 29 </head> 30 30 <body> 31 31 <p>hello world</p> 32 32 <p>my name is mutou</p> 33 33 <span>how are you</span><span>thank you</span> 34 34 </body> 35 35 </html>
图1
第二个span标签是以父元素body为定位的，距离左侧100像素，距离上侧200像素，但是用ie的调试工具查看了body的position却是static。
疑问：这是否和w3c上说的相违背呢？？？
以上是关于Css中Position定位详解的主要内容，如果未能解决你的问题，请参考以下文章