css定位的分类及概念

在前端开发中，CSS定位是一个非常重要的概念。它允许开发者将HTML元素放置在网页上的特定位置。在本文中，我们将介绍CSS定位的不同类型和概念。

静态定位：

p{
    position:static;
}

静态定位是默认的定位方式。元素不被特定的定位，它会在文档流中根据HTML标记进行排列。即使指定了top、bottom、left和right属性，它们也会被忽略。

相对定位：

p{
    position:relative;
    top:10px;
    left:10px;
}

相对定位将元素相对于其自身的初始位置进行微调。移动时不会改变其他元素的位置，但是留下的空间仍然保留给元素。

绝对定位：

p{
    position:absolute;
    top:50px;
    left:50px;
}

绝对定位将元素放置在父元素中的特定位置。这个特定的位置由top、bottom、left和right属性指定。元素的位置将不受文档流影响，它将出现在文档流中的任何其他元素上方。

固定定位：

p{
    position:fixed;
    top:0;
    right:0;
}

固定定位类似于绝对定位，但元素会始终保持在屏幕上的同一位置，即使用户在页面上滚动。这使得它非常适合用于创建吸附式导航栏或其他可见性强的组件。

粘性定位：

p{
    position:sticky;
    top:50px;
}

粘性定位是相对于父元素的定位方式，但在元素到达指定位置时会变为固定定位。这意味着，当用户滚动时，元素将在其父元素中滚动，当元素到达预定的位置时，它将“粘住”，保持在该位置不动。

这些是CSS定位的常见类型，应根据所需的布局和效果来选择合适的类型和属性。