about position and z-index

前言：

　　在做项目的时候，小编在改一些bug，系统采用的是easy-ui的框架，搜索框的联想搜索被框挡上了，对界面的美观打打折扣，这就需要小编去做点什么了。后来查到原因是因为position的属性设置。所以在这里小编就汇总了一下position和z-index的区别。如下文

一、position：

   ①定义、就是用来固定元素的位置的。比如放置一个文本框的位置
   ②属性、 1）static   用了static 所有的top，left，right设置值都会失效（不起作用）
         2）fixed    设置position为fixed属性，那么元素位置就是相对位置（窗口坐标），会保持在窗口的那个位置。无论浏览器窗口如何滚动。
         3）relative  只能设置左右前后的位置，不能层叠。
         4）absoulte  只单独设置这个元素的位置。可以用left，right，top，或者bottom 进行绝对定位，也可以用z-index进行层叠。

二、z-index的作用： 

    z-index设置了层叠的顺序。就是元素离我们的远近是在一个立体空间里。垂直于屏幕的是z轴，而屏幕的长宽为x，y轴。z-index设置的是z轴的值。

三、为什么做悬浮窗要用position  只用z-index可以吗？

　 不可以，因为z-index对一个定位元素进行设置z轴的值，所以必须使用position先对元素进行定位。

四、demo

  将position设置成static  且left和top设置成100px；

  将position设置成fixed  z-index起作用 隐藏在文字背后。

 将position 设置为absolute  z-index依旧起作用。

设置position为relative  z-index不起作用

去掉position

总结

　　所以综上，只有存在position 和仅有position为absoulte和fixed的时候z-index才有有作用。