admin管理员组

文章数量:1611398

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。

一、position：static；（静态）

默认情况下是静态定位，静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 始终根据页面的正常流进行定位；

二、position: relative;（相对定位）

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整，相对于其正常位置进行定位。

三、position：absolute；（绝对定位）

相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed），如果绝对定位的元素没有祖先，将使用文档主体（body），并随页面滚动一起移动。

例子：    绝对定位和相对定位区别

相对定位，相对自己原来本身的位置定位。
绝对定位，相对父级元素的位置进行定位。

四、position: fixed;（相对视口定位）

即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

例子：

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

四、position: sticky;（用户滚动位置进行定位）

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

本文标签： 布局属性cssPosition

版权声明：本文标题：CSS 布局 - position 属性：绝对定位和相对定位 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728604367a1165265.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。