css--定位and z-index

css-定位

• 定位
  • 相对定位：relative
  • 绝对定位：absolute
  • 固定定位：fixed　

 

 

 

 

• 相对定位
  • 定义：相对于自己原来的位置。
  • 使用效果
    • 1. 元素设置了相对定位后，还是标准文档流。
      2. 设置了相对定位后，可以使用四个方向的属性：top、bottom、left、right。
         通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
  • 相对定位的特点
    • 1. 不脱标（标准文档流）。
      2. 形影分离。
      3. 通过相对定位对元素进行移动后，原来的位置仍然保留。
      4. 设置相对定位后，元素的层级也会变高，会覆盖其他标准文档流元素。
  • 作用：
    • 1. 对元素的位置进行轻微调整。
      2. 做子类元素绝对定位的参考，（父相子绝）　
  • 补充：不要用相对定位来做遮盖现象。　

 

---

 

 

• 绝对定位　

　设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。　

• • 绝对定位使元素的位置与文档流无关，也就是说设置了决定定位，元素“脱标“因此不占据空间。
  • 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
  • 绝对定位的特点：
    1. 脱标。
    2. 做遮盖效果，提高了层级；
    3. 设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

 

　

• • 绝对定位参考点（重点）
    • 单独对一个盒子进行绝对定位的时候
      • 如果使用top属性进行描述的时候，参考点是以页面左上角为基准的。
      • 如果使用bottom属性进行描述的时候，参考点是以 首屏页面左下角为基准的。
    • 以父辈盒子作为参考点
      • 父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，
        这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
      • 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点。
    • 备注：绝对定位的盒子无视父辈的padding。
  • 绝对定位的应用（绝对定位盒子的居中）

　

• 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中。
• 注意：必须是符号！！！！

　

---

• 固定定位
  • 固定当前的元素不会随着页面的滚动而滚动。
  • 固定定位的特点
    1. 脱标。
    2. 遮盖，提升层级
    3. 固定不变。
  • 参考点（***因为有固定不变的效果，所以必须以浏览器作为参照物去固定位置）
    • 设置固定定位，用top描述，是以浏览器的左上角作为参考；
    • 如果用bottom描述，是以浏览器的左下角作为参考。
  • 作用：
  1. 1. 返回顶部栏
     2. 小广告
     3. 固定导航栏。

 

---

• z-index
  • • z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    • z-index 值表示谁压着谁，数值大的压盖住数值小的，
    • 只有定位了的元素，才能有z-index。也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index、
    • 两个父类A,B对应里面的两个子类a，b有重合部分，如果父类A的z-index比B的要大，那么，子类b的z-index无论为多大，都会被a给遮盖。即如果父类的z-index小的话，子类z-index多大都没用。