想要实现如下效果： yellow区域是宽度是100%；想要一个按钮在右侧，且和蓝色区域右侧对齐
思考
毋庸置疑，按钮肯定得使用绝对定位，但是绝对定位的定位位置肯定不能写死，因为这个是个公共组件，黄色区域和蓝色区域的宽度都是不定的，支持动态传入的
重要的一个概念
只给元素指定了absolute，未指定left/top/right/bottom。此时absolute元素的位置就是该元素正常文档流里的位置
结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点
请看code：
<template><div class="container"><div class="content"><div class="top">欲穷千里目</div><div class="bottom"><div class="item"></div><div class="btn"> 绝对定位</div></div></div></div>
</template>
<script>
</script>
<style scoped lang="less">
.container {padding: 20px;margin-left: 100px;width: 600px;height: 300px;border: 1px dashed red;
}
.content {width: 100%;height: 100%;position: relative;.top {width: 100%;height: 32px;border: 1px dashed yellow;}.bottom {.item {display: inline-block;width: 300px;height: 40px;border: 1px dashed blue;}.btn {display: inline-block;width: 80px;height: 30px;border: 1px dashed #f60;}}}
</style>
效果：
解决：
此时只要给.btn增加以下样式即可： position: absolute; top: 0; transform: translateX(-100%);
