elementUI的tree组件，在自定义子节点中，设置absolute的div为什么不能显示完全？

Question

elementUI的tree组件，在自定义子节点中，设置absolute的div为什么不能显示完全？

图中 红色div设置高度500px、绝对定位position: absolute，它的父元素是节点1-1，设置了相对定位position: relative;
我期望红色div能全部显示出来，但结果却是被遮挡了一部分，这是为什么？

<style>
.block {
  width: 300px;
  height: 300px;
  border: 1px solid #333;
}

.custom-tree-node {
  position: relative;
}

.div_box {
  width: 10px;
  height: 500px;
  background-color: red;
  border: 1px solid #333;
  position: absolute;
  top: 0;
  right: -20px;
  z-index: 999;
}
</style>

<template>
  <div class="block">
    <el-tree :data="data" node-key="id" highlight-current>
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <div class="div_box" v-if="node.label === '节点1-1'"></div>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "节点1",
          children: [
            {
              id: 2,
              label: "节点1-1",
            },
            {
              id: 3,
              label: "节点1-2",
              children: [
                {
                  id: 4,
                  label: "节点1-2-1",
                },
                {
                  id: 5,
                  label: "节点1-2-2",
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

问题分析：

问题的关键在于绝对定位的红色div被部分遮挡，导致无法完全显示。这是由于元素的堆叠顺序（stacking order）引起的，虽然z-index设置了较高的值，但由于父元素的堆叠上下文（stacking context）导致了遮挡。

解决思路：

1. 确保红色div的父元素具有更高的z-index值，以确保它在堆叠顺序上位于树节点之上。
2. 考虑调整红色div的位置，使其在整个树组件中能够完全显示。

解决方案：

在custom-tree-node类中添加更高的z-index值，并调整红色div的位置以确保完全显示。

<template>
  <div class="block">
    <el-tree :data="data" node-key="id" highlight-current>
      <span class="custom-tree-node" slot-scope="{ node, data }" style="z-index: 999;">
        <span>{{ node.label }}</span>
        <div class="div_box" v-if="node.label === '节点1-1'"></div>
      </span>
    </el-tree>
  </div>
</template>

<style>
  .block {
    width: 300px;
    height: 300px;
    border: 1px solid #333;
  }
  .custom-tree-node {
    position: relative;
  }
  .div_box {
    width: 10px;
    height: 500px;
    background-color: red;
    border: 1px solid #333;
    position: absolute;
    top: 0;
    right: -20px;
  }
</style>

这样，红色div应该能够完全显示在节点1-1的旁边。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订