不能不知道的CSS选择器技巧

2020-04-30 14:50:11易采站长站整理

position 定位的问题

position属性规定了元素的定位类型,默认为static。

该属性还可以有下值:

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
inherit:规定应该从父元素继承 position 属性的值。

代码:

CSS Code复制内容到剪贴板

<!–position:absolute–>   
  
  <style>   
  
      body{   
  
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/  
  
      }   
  
      .test-div{   
  
          position:absolute;   
  
          left:50px;   
  
          top:50px      }   
  
  </style>   
  
  <div class="test-div">Hello World</div><!–position:fixed–>   
  
  <style>   
  
      body{   
  
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/  
  
      }   
  
      .test-div{   
  
          position:fixed;   
  
          left:50px;   
  
          top:50px      }   
  
  </style>   
  
  <div class="test-div">Hello World</div><!–position:relative + position:absolute–>   
  
  <style>   
  
      .out-div{   
  
          width: 300px;