vue-position: absolute

在Vue中（实际上是在所有Web开发中），position: absolute; 是一个CSS属性，它用于设置元素的定位方式。当你给一个元素设置 position: absolute; 时，这个元素会脱离其正常文档流，并根据其最近的已定位（即非static定位）祖先元素进行定位。如果没有这样的祖先元素，它将相对于初始包含块（通常是视口或HTML元素）进行定位。

position: absolute; 的几个关键点：

1. 脱离文档流：元素不会占据其在文档流中的空间，其他元素会忽略它的存在。
2. 相对于最近的已定位祖先元素：这个“已定位”的祖先元素指的是任何position属性不是static的元素（static是默认值）。如果找不到这样的祖先元素，元素将相对于初始包含块（通常是视口）进行定位。
3. 使用top, right, bottom, left属性进行定位：当你使用position: absolute;时，通常会配合top、right、bottom、left属性来指定元素的确切位置。
4. 堆叠上下文：当元素被设置为绝对定位时，它可能会创建一个新的堆叠上下文（stacking context），这会影响元素的z-index和与其他元素的堆叠顺序。

在Vue中使用position: absolute;时，你通常会在组件的<style>部分定义它，就像在任何其他HTML或CSS文件中一样。但是，Vue也提供了动态绑定样式的能力，这意呀着你可以根据组件的数据来动态地改变元素的定位。

例如：

在这个例子中，<div>元素被设置为绝对定位，并且它的top和left属性是动态绑定的，基于Vue实例的data中的topPosition和leftPosition值。同时，.container元素被设置为position: relative;，以确保绝对定位的元素是相对于它进行定位的。