css使div垂直固定,但水平粘在页面的边框上

1. 使用CSS使div垂直固定

在CSS中，可以使用position属性来控制元素的定位。要使div垂直固定，可以将其position设置为fixed，并通过top、bottom、left、right属性调整div的位置。

1.1 position属性

position属性有以下几个值：

static - 默认值，元素遵循正常的文档流，不受定位影响。

relative - 元素相对于其正常位置进行定位，通过top、bottom、left、right属性进行调整。

fixed - 元素相对于浏览器窗口进行定位，通过top、bottom、left、right属性进行调整。

absolute - 元素相对于其最近的非static父元素进行定位，通过top、bottom、left、right属性进行调整。

1.2 使用position: fixed实现垂直固定

要使div垂直固定，可以将其position设置为fixed，并通过top、bottom、left、right属性调整div的位置。例如：

div {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

上述代码将div的垂直位置固定在页面的中间。

2. 使用CSS使div水平粘在页面边框上

要使div水平粘在页面的边框上，可以使用CSS的left和right属性将其定位于页面的左边框和右边框。

2.1 使用left和right属性实现水平粘边

要使div水平粘在页面的边框上，可以将其left属性设置为0，right属性设置为0。例如：

div {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

上述代码将div的水平位置设置为页面的左边框和右边框，使其水平粘在边框上。

3. 总结

使用CSS的position属性和top、bottom、left、right属性可以实现div的垂直固定和水平粘在页面边框上。通过将position属性设置为fixed，可以将元素固定在浏览器窗口的相对位置上；通过调整top、bottom、left、right属性，可以控制元素的位置。