js.jq怎么实现点击一个div则出现另一个div在他下面？

图片说明
如图，点击一个框就出现他的解释说明，解释说明都是同一个div，css都一样，点击左边的出现的说明的背景图就是凹槽在左边，然后中间的就是在中间，都是换个背景图的问题，我现在做出来不管点击哪一排的出现的说明div都在第一排下面，请问各位大佬怎么让点击哪排就出现在哪排啊，麻烦上一下代码，十分感谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .five-C{
            width: 500px;
            border:1px solid red;
            margin: auto;
            height: 500px;
        }
        .xidi-key-banner{
            display: flex;
            justify-content: center;
        }
        .xidi-key{
            border:1px solid orchid;
            width: calc(500px / 3 - 10px);
            margin: 5px;
            height: 100px;
        }
        .xidi-key-content{
            height: 200px;
            margin: 5px;
            position: relative;
        }
        .xidi-key-txt{
            border:1px solid red;
            height: 200px;
            position: absolute;
            width: 100%;
            display: none;
        }
    </style>
</head>
<body>
    <main class="five-C">
        <div class="xidi-key-banner">
            <div class="xidi-key"></div>
            <div class="xidi-key"></div>
            <div class="xidi-key"></div>
        </div>
        <div class="xidi-key-content">
            <div class="xidi-key-txt">
                内容1
            </div>
            <div class="xidi-key-txt">
                内容2
            </div>
            <div class="xidi-key-txt">
                内容3
            </div>
        </div>
    </main>

    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        $('.xidi-key').each((i,ele)=>{
            $(ele).click(()=>{
                $('.xidi-key-txt').fadeOut().eq(i).fadeIn();
            })
        })
    </script>
</body>
</html>

首先定位凹槽的坐标，然后确认坐标在点击不同按钮时坐标是否有变换（根据你的描述，很显然没有变化），那么先通过点击不同按钮修改不同凹槽的坐标；总结规律后提出过滤然后通过不同按钮进去传入不通知动态切换凹槽的位置

你可以在点击钥匙时候给当前的钥匙框加一个class比如on，然后css里面写一个针对这个class的after属性绝对定位到当前钥匙框下面居中，写好宽高插入背景图，向下的箭头就弄好了，至于下面那个框的内容，就相当于有很多框内容，但是只有当前这个才显示（3个钥匙和3个介绍是一组，3个介绍框都是向下排列的，只是隐藏显示问题，用钥匙控制保证只有一个显示就行）

改 z-index 属性 , 再下面的数值小一点 , 上面的大一点

使用绝对定位，改变说明div的left和top的值就行了

最笨的办法，事先在每一个div下面都放一个隐藏的说明div，当点击其中一个的时候显示出来，点下一个的时候隐藏上一个