CSS 学习笔记 - 定位

墨蓝 2022-12-03 13:14 159阅读 0赞

### CSS 学习笔记 - 定位 ###

*  定位类型
 *  偏移类型
 *  深度控制
 *  参考资料

# [定位类型][Link 1] #

div { 
          position: static| relative | absolute| fixed | sticky;
      }

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">static</a></td> 
   <td>文档流</td> 
   <td>元素在文档流中的正常行为。此时 <code>top, right, bottom, left 和 z-index</code> 属性无效。</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>相对定位</td> 
   <td><code>保留</code>文档流中的<code>占位</code>，相对于自己原来的位置进行偏移。</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>绝对定位</td> 
   <td><code>脱离</code>文档流。相对于<code>最近</code>一个<code>脱离文档流</code>的<code>祖先</code>元素进行偏移。元素拥有行内块特性。</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>固定定位</td> 
   <td>固定在屏幕视口上，不受滚动影响。创建新的层叠上下文。<br>例：页面右下角的浮动广告</td> 
  </tr> 
  <tr> 
   <td>sticky</td> 
   <td>粘性定位</td> 
   <td><code>relative</code>和<code>fixed</code>的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。<br>例： 实现滚动文章时，段落标题吸附在容器顶部的效果</td> 
  </tr> 
 </tbody> 
</table>

*  `sticky`同级效果：后覆盖前。非同级效果：后将前挤出。

# 偏移类型 #

*  `relative | absolute| fixed` 定位类型时有效
 *  设置偏移后，将不再受父元素的`padding`影响。
 *  元素`height`or`width`未指定时（即`auto`），可以设置`top:0;bottom:0;`垂直拉满。水平同理。

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/top" rel="nofollow">top</a></td> 
   <td>距离顶边偏移</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/bottom" rel="nofollow">bottom</a></td> 
   <td>距离下边偏移</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/left" rel="nofollow">left</a></td> 
   <td>距离左部偏移</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/right" rel="nofollow">right</a></td> 
   <td>距离右边偏移</td> 
  </tr> 
 </tbody> 
</table>

# 深度控制 #

*  `子`元素在`父`元素之上
 *  同一层级`z-index`大的在上。

# 参考资料 #

[MDN：CSS\_定位\_Positioning][MDN_CSS_Positioning]  
[MDN：CSS属性值定义语法][MDN_CSS]  
[后盾人：定位布局][Link 2]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
[MDN_CSS_Positioning]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning
[MDN_CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax
[Link 2]: https://houdunren.gitee.io/note/css/9%20%E5%AE%9A%E4%BD%8D%E5%B8%83%E5%B1%80.html