浅说css的绝对定位跟相对定位

来源：互联网发布：nba关注软件编辑：程序博客网时间：2024/04/29 04:16

前言：接触html跟css也有段时间了，但是每次要用div+css布局时，心里还是有点虚，尤其是对于position这个属性的运用，之前都是囫囵吞枣。大致了解个概念，对他们也不够重视，这让我在用到这个属性布局时吃了不少亏，都说在“哪里跌倒就在哪里爬起来！”，对于这个自己埋下的坑，最近终于可以静下心来好好把这个坑填上了，同时把自己学到的跟大家分享下，希望能给初学者一点帮助，不要像我之前一样老是掉坑里~接下来咱就简单说说position的那些事儿。。。

position有四种属性，分别是static，fixed，relative，absolute；

前面两种，相对来说理解起来也比较简单，

position：static — —静态定位，是position的默认定位方式，一般不给元素设置position属性或者设置为静态时，元素都会按照正常的文档流进行排列。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>定位机制学习</title><style type="text/css">.sub1{width: 100px;height: 100px;border: 1px solid  aquamarine;}.sub2{width: 50px;height: 50px;border: 1px solid #FFC0CB;}</style></head><body><!--position:static--><div class="sub1"><div class="sub2"></div></div></body></html>

position：fixed — —固定定位，是absolute的特殊，总是相对于body这个元素进行定位。设置top，bottom，left，right等会按照浏览器窗口进行移动。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>定位机制学习</title><style type="text/css">.sub1{width: 100px;height: 100px;border: 1px solid  aquamarine;}.sub2{position: fixed;top:20px;width: 50px;height: 50px;border: 1px solid #FFC0CB;}</style></head><body><!--position:fixed--><div class="sub1"><div class="sub2"></div></div></body></html>

哈哈哈，说完这两个简单的，咱们该说说重头戏：relative跟absolute了，

position：relative — —相对定位，既然是相对定位，那总该找个东西来相对吧？是滴，没猜错，设置了position：relative的元素会相对自身原来的位置进行（top，right，bottom，或者left）移动。而且重点是position：relative这个属性没有脱离标准文档流，因此，元素本身所占的位置会被保留。

!DOCTYPE html><html><head><meta charset="UTF-8"><title>定位机制学习</title><style type="text/css">.sub1{width: 100px;height: 100px;border: 1px solid  aquamarine;}.sub2{width: 50px;height: 50px;border: 1px solid #FFC0CB;position: relative;top: 10px;left: 40px;}</style></head><body><!--position:relative--><div class="sub1"><div class="sub2"></div></div></body></html>

position：absolute — —绝对定位，所谓绝对定位，无非也是要找个“相对”的物体来“绝对”，是不是觉得有点别扭勒？借个比方，换个说法，就是这个小鬼（element）的定位可以是他的老爸，他的爷爷，他的太公....（祖先要素）中而且第一个是是有钱的（position:absolute）或者是当官的（position:relative），就是不能是个程序猿（position:static 或者没有设position）的。而且值得注意的是position:absolute这个属性是脱离文档流的，所以重新定位后元素是不会占着原来的位置的。这个就不贴代码了，大家可以自己动手敲敲键盘，就会明白了，（主要是太形象我画不粗来，~~~~(>_<)~~~~）。

注：本菜鸟对position的愚见大致酱紫，如有错误还请大家及时指正。

0 0