如何在div中打开元素ui抽屉，而不是窗口

Question

我正试图在div中弹出一个抽屉，而不是使用完整的可用窗口。

var Main = {
data() {
return {
drawer: false,
direction: 'rtl',
};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.drawer-container{
height: 600px;
width: 600px;
border: 1px solid red;
}
.drawer{
height: 100%;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<div class="drawer-container">
<el-drawer
class="drawer"
title="I am the title"
:visible.sync="drawer"
:direction="direction">
<span>Hi, there!</span>
</el-drawer>
</div>
</div>

我的问题是，抽屉似乎完全无视它的父母css是什么。有人知道改变这一点的方法吗？

Answer 1

原来这就像添加position: relative一样简单

var Main = {
data() {
return {
drawer: false,
direction: 'rtl',
};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.drawer-container{
height: 600px;
width: 600px;
border: 1px solid red;
}
.drawer{
position: relative;
height: 100%;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<div class="drawer-container">
<el-drawer
class="drawer"
title="I am the title"
:visible.sync="drawer"
:direction="direction">
<span>Hi, there!</span>
</el-drawer>
</div>
</div>