CSS padidng-top\margin-top\fixed 的特殊性

参考： 使用css时，可能会出错的两个地方

1、padidng-top\margin-top

padidng-top\margin-top可以设置'px' 或者是'%'，设置'px'略过，说一下设置‘%’

code1：

 子元素的 padding-top  margin-top 设置为 百分数 时，是相对于父元素的宽幅的百分比，不是高度

  <style>
    .parent {
      width: 100px;
      height: 300px;
      background-color: #ab55ed;
      overflow: hidden;
    }
    .child {
      /* padding-top: 100%; */
      margin-top: 100%;
      width: 50px;
      height: 50px;
      background-color: #ff55ff;
    }
  </style>

  <div class="parent">
    <div class="child"></div>
  </div>

2、fixed

一提到position:fixed，自然而然就会想到：相对于浏览器窗口进行定位。

但其实这是不准确的。如果说父元素设置了transform，那么设置了position:fixed的元素将相对于父元素定位，否则，相对于浏览器窗口进行定位。

code2:

注意，body会有默认的8px padding

  <style>
    .parent {
      width: 100px;
      height: 300px;
      background-color: #ab55ed;
      /* transform: translateY(0) */
    }
    .child {
      width: 50px;
      height: 50px;
      background-color: #ff55ff;
      position: fixed;
      top: 50px;
      left: 50px;
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

      /* transform: translateY(0) */ 把注释解除掉，可以看到不同！