html定位布局的认识

  1. static
    static:默认值。没有定位,top,right,bottom,left和z-index对其无效。
  2. relative
    relative:相对布局。指的是相对于它本身在文档流中的位置的定位。具体的就是相对于本身父元素内同级元素的定位,也就是上一个同级元素,如果没有同级元素,则是相对于它自身的父元素的定位。通过top,right,bottom,left确定位置,可通过z-index对其进行层次分级。
  3. absolute
    absolute:绝对布局。绝对布局的参考物是指的追溯它最近的非static定位的父级元素(注意此处的斜体,非static定位指的是自己为父级元素添加了定位方式,改变了父级元素的默认定位方式的static,如果这种情况出现,则是根据符合这种情况且离它最近的父级元素进行定位)。通过top,right,bottom,left确定位置,可通过z-index对其进行层次分级。
  4. fixed
    fixed:相对于浏览器窗口进行定位,通过top,right,bottom,left确定位置,可通过z-index对其进行层次分级。

ps

  1. 父级元素不一定是本身父元素,但是有可能是本身的父元素,视情况而定。
  2. 创建一个块级元素,默认定位方式是static,除非自己定义将其改变。
  3. absolute以及relative的定位方式可能用的比较多一点,建议测试去理解。比如建立一个大div里包含两个小div,然后不停地改变他们的定位方式以及位置进行理解,这个过程最好有条理地进行,不然很容易会混乱。

猜你喜欢

转载自blog.csdn.net/yyc135/article/details/51925677