CSS position实现左侧图片滑动，滑动到浏览器底部，而不是视图底部

CSS position属性的作用

CSS position属性用来指定一个元素在网页上的位置。position属性有四个值：static、relative、absolute和fixed。

• static：默认值。元素的位置由正常的文档流决定。
• relative：元素的位置相对于它在正常文档流中的位置进行偏移。
• absolute：元素的位置相对于它最近的已定位父元素进行偏移。
• fixed：元素的位置相对于视口进行偏移。

CSS position属性的用法

1. static

static是position属性的默认值，表示元素的位置由正常的文档流决定。

div {
  position: static;
}

2. relative

relative表示元素的位置相对于它在正常文档流中的位置进行偏移。

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

3. absolute

absolute表示元素的位置相对于它最近的已定位父元素进行偏移。

div {
  position: absolute;
  left: 10px;
  top: 10px;
}

4. fixed

fixed表示元素的位置相对于视口进行偏移。

div {
  position: fixed;
  left: 10px;
  top: 10px;
}

使用CSS position属性的技巧和注意事项

• 使用position属性时，一定要指定元素的位置，否则元素将不会显示。
• 使用position属性时，要考虑元素的父元素的位置。如果父元素没有定位，那么元素的位置将相对于视口进行偏移。
• 使用position属性时，要考虑元素的z-index属性。z-index属性决定元素的层叠顺序，z-index值较大的元素会覆盖z-index值较小的元素。
• 使用position属性时，要考虑元素的margin属性。margin属性决定元素与其他元素的间距。
• 使用position属性时，要考虑元素的padding属性。padding属性决定元素内容与元素边框的间距。

总结

CSS position属性是一个非常强大的属性，可以用来实现各种各样的效果。掌握了CSS position属性的用法，可以让你在网页设计中更加得心应手。