Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位

<template>
  <div class="container">
    <div class="box static">静态定位</div>
    <div class="box relative">相对定位</div>
    <div class="box absolute">绝对定位</div>
  </div>
</template>
 
<style scoped>
.container {
  position: relative;
  height: 200px;
  border: 2px solid #000;
}
 
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
 
.static {
  background-color: lightblue;
}
 
.relative {
  position: relative;
  top: 40px;
  left: 40px;
  background-color: lightcoral;
}
 
.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: lightgreen;
}
</style>

这个代码实例展示了如何在Vue组件中使用CSS定位。.container 设置为 position: relative; 以建立一个定位上下文。.static 类使用默认的静态定位。.relative 类使用 position: relative; 并通过 top 和 left 属性进行相对定位。.absolute 类使用 position: absolute; 并通过 top 和 right 属性进行绝对定位。这些属性值都是相对于包含它们的 .container 元素的边缘。