position有四个值:
- static:默认值。设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
- relative:设置为 relative 的元素的 top、bottom、left和 right都是相对于原来的位置。元素仍然占据原来在页面流中的位置。
- absolute:设置为 absolute 的元素的 top、bottom、left和 right相对于最近的定位不是 static的父元素。如果所有父元素定位都是 static,则相对于 window进行定位。元素不占据页面流中的位置。
- fixed:设置为 fixed 的元素,相对于浏览器窗口进行定位。元素不再占据页面流中的位置。
需要注意的是,设置了 left的元素不能再设置 right,设置了 top的元素不能再设置 bottom,反过来也是一样。如果同时设置的话,left的优先级高于 right,top优先级高于 bottom(不论它们出现的位置如何)。
另外 left参考元素的左侧边,right参考元素的右侧边,top参考元素的上边,bottom参考元素的下边。
也就是说,如果元素的 position设置为 relative,left指的是元素的左侧边相对于原来的位置移动的距离。如果元素的 position设置为 absolute,left指的是元素的左侧边和最近定位不是 static的父元素的左侧边的距离。right、top和 bottom同理。
参考:
position 的注意点与使用场景:https://blog.csdn.net/dhl879850/article/details/83057328
如果你不是在简书看到这篇文章,请移步简书支持原作者