定位样式position的四种定位

定位: position

   对元素进行精确的位置调整.

   4种定位方式:

   1.静态定位(static):默认的,按照文档流的元素排布顺序和自身的属性正常排布.

   2.相对定位(relative):

   3.绝对定位(absolute):

   4.固定定位(fixed):

   这4种方式只是规定了元素的定位方式,具体的移动元素的位置还要结合left,right,top,bottom四个样式.

   ****注意:只有设定了定位的元素,以上四个样式设置才会有作用,否则无效.

     凡是脱离文档流的定位元素(absolute/fixed),自动magrgin失效.

   -->

   <!-- 静态定位

  我们以后不会设置一个元素的定位方式为static -->

  <!-- 相对定位:relative

   1.相对定位的元素不会完全脱离文档流,会保留之前的位置.

   2.相对定位的元素所移动位置的参考是其之前的位置. -->

  <!-- 绝对定位absolute

   1.脱离文档流,不会保留其之间的位置,如果元素都绝对定位,就看书写位置,后面的会盖住前面的.

   2.如果设置了绝对定位的元素的所有父级都没设置除static外的定位样式,则元素相对于整个文档(document)来定位.

   3.绝对定位一定要有对应的参考位置,想让绝对定位的元素参考谁进行移动,就给谁设置position:relative.

   垂直居中:

   给子元素设置绝对定位,并给父元素设置相对定位(relative)或者固定定位(fixed),建议使用相对定位,在给子元素设置top,bottom设置为0,上下margin给auto即可居中

    -->

  <!-- 固定定位

   1.固定定位的元素会脱离文档流,不保留之前位置.

   2.固定定位的元素移动位置的参考是整个文档.

   固定定位一般用来实现导航栏固定效果.

vertical-align 

  该样式定义行元素的基线相对于该元素所在行的基线的对齐方式. 

  basline:基线对齐

  middle:元素的中线与所在行的基线对齐.

  top:父元素content区域的顶端对齐

  bottom:与父元素content区域的底端对齐

  text-top:与文本的最高位置对齐.

  text-bottom:与文本的最低位置对齐

  surper:与上标文字的底端对齐

  sub:与下标文字的底端对齐.-->

  <!-- 上标标签 (sup) 下标标签 (sub) 都是双标签 -->

  <!-- 行元素竖直居中

   a. 文字竖直居中,如果单行文字只需要让行高(line-height)

   等于父级高度即可.

   b.如果图片的告诉小于父级的高度,需要给图片设置vertical-align:middle

   让该行的行高等于父级的高度.

   c.如果图片的高度等于父级的高度,只需要设置图片的vertical-align:middle即可.-->

  <!-- 块元素竖直居中

   给子元素设置绝对定位,并给父元素设置相对定位(relative)或者固定定位(fixed),建议使用相对定位,在给子元素设置top,bottom设置为0,上下margin给auto即可居中

层级  

设置元素堆叠顺序,拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面.

  并且z-index只对定位元素起作用.*/

  z-index: 1;