摘要 51RGB官方微信position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。
postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。
（1）static
（2）relative
HTML代码
2 <div class="relative"> <div></div> |
CSS
2 | .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } |
nerror="javascript:errorimg.call(this);">
在这个例子中，div.relative相对定位，并且left设置为20px，left设置为50px，其相对于父元素进行偏移，并且原本的空间也占据着，下面的元素并不会顶替上去。
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子：
HTML代码
2 <span class="absolute"> <div></div> |
2 | .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } |
nerror="javascript:errorimg.call(this);">
absolute效果
（4）fixedfixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移
在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性，它要分几种情况来讨论：
2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界
HTML代码
2 4 6 | 我是父级元素的内容 相对定位元素 </div> |
包含块
3.非根元素的包含块，如果该元素的position是absolute，则包含块为最近的position不是static的祖先元素。简单来说，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。
前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top和bottom是相对于包含块高度的百分比，left和right是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。
接下来我们了解一下绝对定位的详细细节。
一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
HTML代码
2 4 6 8 10 12 14 | 相对于初始包含块定位 <br /> <br /> <br /> <br /> <div class="absolute"> 相对于最近relative祖先元素定位 </div> |
2 div { background: #0094ff; width: 250px; height: 100px; } .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } |
nerror="javascript:errorimg.call(this);">
如图所示，有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的包含块是body，根据body进行偏移，第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。
元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。看看下面的例子：HTML代码
2 4 6 8 | <div class="absolute"> 相对于最近relative祖先元素定位1 <div class="absolute light"> 相对于最近relative祖先元素定位2 </div> |
2 4 | .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; } .light { background: #f3d6d6; top: 70px; left: 80px; } |
nerror="javascript:errorimg.call(this);">
我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10，结果如下
nerror="javascript:errorimg.call(this);">
如果两个元素的层级相同，则越后面的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。
固定定位
相对定位
relative定位的元素进行偏移后，不会脱离文档流，还有占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。我们看看下面的例子：HTML代码
2 4 6 | <div class="no-relative"> 未相对定位的元素 <div class="minus-margin"> 负margin元素 </div> |
2 4 | .no-relative { background: #ff6a00; width: 200px; height: 100px; } .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; } .minus-margin { margin-top: -30px; } |
nerror="javascript:errorimg.call(this);">
未相对定位时没有覆盖
nerror="javascript:errorimg.call(this);">
添加了相对定位后，第一个元素就会覆盖其他正常的元素了。
应用举例
产品标签
nerror="javascript:errorimg.call(this);">
这个是怎么实现的呢，我们来模拟一下：HTML代码：
2 4 6 | 我是产品 热卖 </div> |
CSS
2 | .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; } |
nerror="javascript:errorimg.call(this);">
如图所示，右上角有一个标签。原理很简单，就是设置父元素相对定位，标签元素绝对定位，然后相对于父元素偏移到右上角。
自动完成框是一个非常常见的应用，其生成的下拉菜单也是用到了position属性。我们先看看下面的效果：
自动完成输入框
这是一个很简单常见的下来自动完成框，我们来看看它的HTML和CSS代码：HTML代码
2 4 6 7 | <ul style="left:58px;"> <li>position应用</li> <li>position翻译</li> </ul> |
2 4 | .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; } ul { border: 1px solid #ccc; width: 210px; position: absolute; } 这个原理也很简单，通过设置下拉菜单为绝对定位，然后设置其left属性与输入框对齐。 总结想认识志同道合的朋友一起学习web 丰富的学习资源，周一到周四免费直播公开课
微信：UI设计自学平台加关注 长按关注：《UI设计自学平台》 打赏 0 条相关评论
相关推荐
热门搜索排行
精彩图片
友情链接
(c)2008-2018 DESTOON B2B SYSTEM All Rights Reserved
|
