position 和z-index的使用

1.解决bootstrap datetimepicker 在bootstrap modal中不显示问题

       通过在 input 输入框之外嵌套,因为datatimepiker的默认z-index是10,输入框的z-index是9999,所以显示不出来.经这样解决,datetimepicker的z-index变成了10009,自然在最上层,然后显示出来.当然z-index要想起作用,必须有position属性值为absolute、relative或fixed.

2.解决按钮悬浮在屏幕最下方的问题

关键就在于position和bottom的设置.

position:fixed; //设置此样式可使得被设置的内容不随滚动条而滚动.

botttom:10px;  //设置此样式使得其内容距下方距离10个像素.

---

通过使用position 属性，我们可以选择 4 种不同类型的定位，它们分别是：static、absolute、fixed、relative。

static:（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。

relative:相对定位元素的定位是相对自己原本的正常位置。依据left，right，top，bottom等属性在正常文档流中偏移位置。

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。

left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。

absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。

left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

补充：

1. 设置absolute会使得inline元素被“块”化，这在上一节将display时已经说过；

2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多；

3. 上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”

fixed:其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。即使窗口是滚动的它也不会移动

1. Fixed定位使元素的位置与文档流无关，因此不占据空间。

2. Fixed定位的元素和其他元素重叠。

3. IE6不支持CSS中的position:fixed属性。

【Z-index】垂直定位：Z轴方向上的层叠定位。

 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 

Z-index默认值都为0，但默认情况下，后来者会覆盖前者，此时，如果需要改变层级关系，就要通过改变z-index值来实现。z-index越大优先级越高。

如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。

例如弹出层时用到最多。

在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。