样式position种类

在HTML和CSS中，position属性用于指定元素在页面中的定位方式。position属性有五种取值：static、relative、absolute、fixed和sticky。下面逐一介绍这几种position属性的使用方法和代码示例。

1. static：

static是position属性的默认值，元素会按照其在HTML文档中的正常流布局。即使设置了top、right、bottom和left属性，也不会产生任何效果。

```css

div.static {

position: static;

top: 50px;

left: 50px;

}

```

2. relative：

relative会使元素相对于其在正常流中的位置进行定位，然后通过top、right、bottom和left属性进行微调。相对定位不会脱离文档流，不会影响其他元素的位置。

```css

div.relative {

position: relative;

top: 20px;

left: 20px;

}

```

3. absolute：

absolute会使元素脱离文档流，通过设置top、right、bottom和left属性相对于最近的具有定位特性的父元素进行定位。如果没有父元素设置了position属性，那么元素会相对于文档的根元素进行定位。

```css

div.absolute {

position: absolute;

top: 100px;

left: 100px;

}

```

4. fixed：

fixed会使元素脱离文档流，通过设置top、right、bottom和left属性相对于浏览器窗口进行定位，即元素会固定在页面的某个位置不随滚动条滚动而改变位置。

```css

div.fixed {

position: fixed;

top: 10px;

right: 10px;

}

```

5. sticky：

sticky是相对定位和固定定位的混合。元素在其父元素范围内定位时表现为相对定位，当元素超出父元素可视范围时，在窗口内固定定位。

```css

div.sticky {

position: sticky;

top: 0;

}

```

通过合理运用以上position属性的取值，可以实现各种复杂的布局效果和交互效果。在实际项目中，根据需要选择合适的定位方式，灵活运用position属性，使页面布局更加灵活多样。