css之positon定位

最近要把一个长表格改成表头不随滚动向上滚动而是固定，复习下css的定位知识，记录下

<style>
  .box {
    border: 1px solid silver;
    position: relative;
    height: 200px;
    width: 300px;
    overflow: auto;
  }
  .relative {
    position: relative;
    left: 100px;
    top: 100px;
    border: 1px solid red;
    width: 100px; /* 不定义宽度则继承父盒子的宽度 */
  }

  /* 绝对定位：如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位。
  如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
  绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。
  子绝父相 */
  .absolute {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  /* 固定定位(fixed): 以浏览器的可视窗口为参照点移动元素。
   跟父元素没有任何关系,不随滚动条滚动。固定定位不在占有原先的位置。 */
  .fixed {
    position: fixed;
    top: 200px;
    left: 300px;
    border: 1px silver solid;
  }

  .box1 {
    height: 100px;
    width: 300px;
    border: 1px solid silver;
    overflow: auto;
  }

  /* 粘性定位(sticky):粘性定位可以被认为是相对定位和固定定位的混合
  能够实现类似吸附的效果，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。
  比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端 */
  .sticky {
    position: sticky;
    top: 0;
    background-color: aliceblue;
  }
</style>

<div class="box">
  父盒子
  <div class="relative">relative相对定位</div>
  <span class="absolute">absolute绝对定位</span>
  <div class="fixed">fixed固定定位</div>
</div>

<div class="box1">
  sticky粘性定位--表格固定表头
  <table>
    <thead class="sticky">
      <tr>
        <th>title</th>
        <th>content</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
    </tr>
  </table>
</div>