WEB的元素定位-CSDN博客

元素的定位:

在CSS中，框是页面布局的对象和基本单位，在一个页面上，必然会存在大量的框, CSS提出了普通流、绝对定位、浮动这三种定位方案，通过定位方案来控制元素的位置，实现有序的排列和布局。

1:普通流:

只有行内级框参与的格式化上下文，称作行格式化上下文（Inline Formatting Contexts，简称IFC），它规定了内部的行内级框如何排列。在行格式化上下文中，行内级框从包含块的顶部开始，一个接一个地水平排列。在布局时，水平方向的外边距、边框和内边距都有效，并通过水平方向的外边距来调整框之间的水平距离。两个相邻的行内级框之间的水平距离，等于第一个框的 margin-right 与第二个框的 margin-left 之和

块级框参与的格式化上下文，称作块格式化上下文（Block Formatting Contexts，简称BFC），它规定了内部的块级框如何排列。

在CSS中，把这个现象称作外边距合并，即 margin 的合并，意思是说较小的 margin，被合并到了较大的 margin 之中。

只要是两个垂直外边距相遇，不管这两个元素之间是父子关系还是兄弟关系，都会发生外边距合并。当一个元素包含在另一个元素中时（假如没有内边距或边框把外边距隔开），它们相邻的外边距也会发

2:定位

在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。

要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。

2.1相对定位

（相对与自己原本位置偏移）

当一个元素的 position属性设置为 relative，它将使用相对定位。相对定位的元素在普通流中进行定位，它将出现在文档流中原本的位置。然而，可以通过设置水平或垂直偏移量，使它相对于原本的位置，偏移指定的距离，移动到新的位置。如果没有设置偏移，或设置的偏移量为 0，那么它仍将保持在原来的位置。

相对定位的元素，通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离，right 表示相对于原本位置的右外边界左移的距离，top 表示相对于原本位置的上外边界下移的距离，bottom 表示相对于原本位置的下外边界上移的距离。并且，偏移量可以是正值，也可以是负值，负值表示向相反的方向移动。

left、right、top、bottom 这 4 个属性的值，可以是长度值（可以是绝对单位或相对单位），也可以是百分比。使用百分比时，水平偏移量根据其父元素 width 属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是，在设置偏移时，如果父元素没有显式定义 height 属性，就等同于 height 属性的值为 0。

<div id = "wraper">
   <div></div>
   <div></div>
   <div></div>
</div>

#wraper  {
   width: 366px;
   overflow: hidden;   /* 防止父元素高度塌陷 */
   box-sizing: border-box;
   border: 2px dashed #ccc;
}
#wraper > div {
   float: left;   /* 让元素水平排列 */
   margin: 10px;
   width: 100px;
   height: 80px;
   border: 1px solid #ccc;
   box-sizing: border-box;
}

#wraper div:nth-child(2) {
   top: 20px;
   left: 30px;
   position: relative;
}

绝对定位

fixed：相当与整个屏幕显示

absolute：相对与整个父元素

当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。

绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，如果没有已定位的祖先元素，则为初始包含块（即 html 元素），也就是视口。position: fixed 元素的包含块是初始化包含块。当页面出现滚动条时，无论如何滚动，position: fixed 的元素始终处于固定的位置，不会随着页面滚动。因此，position: fixed 的定位被称作固定定位。不过，IE6及以下版本不支持固定定位。

绝对定位元素中，top、bottom、left、right 属性的含义，与相对定位元素完全不同，需要特别注意。绝对定位元素的 top、bottom、left、right 属性，表示元素自身相应的外边界，与包含块对应的内边距边界（注意：不是内容边界）的距离，而不是偏移量。

#wraper {
   position: relative;
   …
}
#wraper div:nth-child(2) {
   top: 20px;
   left: 20px;
   position: absolute;
}

z-index

默认情况下，网页是一个二维空间，并根据在DOM中的顺序，从左到右，从上到下，依次排列各个元素。

当页面上出现相对定位、或绝对定位、或固定定位的元素后，如果对一个元素设置了偏移，就很可能出现元素相互重叠的情况。如果把页面作为 x-y 轴，垂直于页面的方向就是 z 轴，重叠的情况就发生在 z 轴。

元素在 z轴的位置，取决于它在DOM中的先后顺序。如果两个元素发生重叠，在DOM中先出现的元素，通常排在后出现元素的下面，被后出现元素的覆盖。出现这种情况后，可以通过 z-index 属性来调整元素在 z 轴方向上的堆叠顺序。

z-index 属性的值为整数，可以为正数，也可以为负数，默认值为 0。在 z 轴方向上，定位元素就会按各自 z-index 属性的值，从小到大依次排列。z-index 属性的值越大，元素离用户越近

z-index 属性的值可以不必连续，换句话说，10、20、30 与 1、2、3 的作用相同。把数值拉开一些，更便于以后把更多的元素插入到堆叠中。如果两个元素的z-index 属性值相同，则保持原有的堆叠关系。如果确保定位元素的上层不会出现任何内容，就可以给它设置一个相当大的 z-index 值。

需要注意的是，z-index 属性只对绝对定位、相对定位或固定定位的元素有效，对静态定位的元素无效。

转载于:https://my.oschina.net/u/3888017/blog/1831391