css - element UI el-collapse in front if others components

Question

这是我的 el-collapse:

<template>
  <div id="realtime">
    <el-row>
      <el-collapse accordion>
        <el-collapse-item name="1" class="spy-infobar-collapse">
          <template slot="title">
            Consistency<i class="header-icon el-icon-info"></i>
          </template>
          <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
          <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
        </el-collapse-item>
      </el-collapse>
    </el-row>
  </div>
</template>

关闭

打开

我想在其他组件上打开它(避免将下表向右移动)

这是我的布局

<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <sidebar class="sidebar-container"></sidebar>
    <div class="main-container">
      <navbar></navbar>
      <info-bar></info-bar>
      <app-main></app-main>
      <vue-snotify></vue-snotify>
      <back-to-top bottom="50px" right="50px">
        <div class="spy-back-to-top" style=""><i class="el-icon-caret-top"></i></div>
      </back-to-top>
    </div>
  </div>
</template>

el-collapse 在 info-bar 部分，表格在 app-main 部分

这可能吗？如果没有，您知道可以做到这一点的 vue.js 组件吗？

Answer 1

供将来引用:

<style>
.el-collapse-item {
  position: relative;
}

.el-collapse-item__wrap {
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 1;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.el-collapse-item__content {
  user-select: none;
}

</style>