位置是个怎样的概念
哎，这个元素怎么跑那里去了？
回想一下，在我们觉得“样式崩了”，“页面出bug了”的时候，是不是会有相当一部分情况都可以描述成上面这句话呢？
我们在写css的时候，就会经常考虑“位置”这个事。理念就是， 所有的页面元素都应该被安排在为它预定的位置上 。毕竟按照计划预定的来，才能有条不紊，不容易出错。
就像一本杂志的编辑，即便文稿都已准备好，但具体哪篇放在第几页的哪里，是要认真考虑的。好的杂志应该有好的排版。
下面，本文将介绍一些会影响到“位置”，但一般不太会知道的要点。
盒模型的再认识
盒模型你一定很熟悉：
在content、padding、border、margin这些区域之外，请注意图中的edge，也就是分隔盒模型各区域的边。在确定页面元素的准确位置时，需要细致地参考这些边。它们按照范围从小到大分别是：
content edge ，也叫做 inner edge （注意和JavaScript的innerWidth等区别开）。它围成的区域代表内容区，一般由元素内的具体内容决定。它确定的范围叫做content box，也是css属性box-sizing的默认值content-box的范围。
padding edge 。它确定padding box的范围。尽管w3c规范已经从box-sizing移除了这个值，但很容易类比理解。
border edge 。它确定border box的范围。
margin edge ，也叫做 outer edge 。它确定margin box的范围。box-sizing也没有这个值。
为什么需要了解这些边呢？想象一下你想要放置一个元素到你为它安排的位置上，但是，你拿的元素并不是一个点（比如物理学里的质点），而是一个盒子。一个占据一定空间的盒子，如果没有边作为参照，你能清楚地知道应该怎样去对齐吗？
背景的位置
背景是很常用的样式，但有好多地方可能不太会注意。
背景分为背景图（background-image）和背景色（background-color），渐变（css gradients）也属于背景图。其中，背景图位于背景色之上。如果使用多个背景图（multiple backgrounds），声明靠前的位于上方。
除background-clip之外的其他背景属性，如background-position、background-size等，都只作用于背景图，对背景色没有作用。这是可以理解的，因为背景色很单纯，它没有起点和终点，总是铺满整个空间，要么有，要么没有。
现在，一个元素div.bg-element定义了这样的css：
.bg-element{ width: 100px; height: 100px; margin: 20px; padding: 20px; border: 5px dashed #386365; background: #2aace9 url(pattern.png) no-repeat;} 这是一个同时有背景图和背景色的元素，而且有内外边距及边框，其效果是：
可以看出，在默认情况下，背景图的起始点为padding box的左上角，而背景色没有起始点，将铺满整个border box（为了看到这一点，特意用了dashed边框）。虽然这个例子中的背景图好像限制在padding box范围内，但实际上，它和背景色的可见范围是一样的，都是border box，用background-position或background-repeat稍作修改即可验证：
这个背景可见范围的概念，对应了css3新增属性background-clip。这个属性的默认值就是border-box。如果更改它，会是这样：
无论怎么修改可见范围，这个例子中的背景图的起始点都是padding box左上角，这就是背景图起始点的概念。它对应的是css3中新增的background-origin，其默认值正是padding-box。如果修改了background-origin，那么属性background-position产生的位置偏移，包括right、bottom等关键字的情况，都会对应地改变参考的边。
外边距区域不会有背景。前文的盒模型的图里，margin和transparent一起也是这个意思。
自设容器进行定位
你一定用过这样的定位搭配：position: relative;的父元素，加上position: absolute;的子元素。
这比较像建立一个xy平面坐标系，然后把元素放置在自己想要的坐标位置上。但是，x轴、y轴、原点、坐标点，它们分别在哪里呢？
请看这个例子：
查看更多关于“位置”在css里的细节_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did113708