小白请教内容弹窗的问题？

疑问解答
1

问题：俺不懂代码这些，就问deepseek按自己想的，想实现内容弹窗，最后出来的样子感觉勉强也可以，就是无法正确设定弹出来的位置，请教大家帮看看吧

这是效果

Screenshot_20251217_154934_md.obsidian
Screenshot_20251217_154934_md.obsidian1080×2400 209 KB

这是文本

<label for="toggle1" class="目录-bg">悬停查看/点击保持</label><input type="checkbox" id="toggle1" class="隐藏-bg-toggle"><span class="隐藏-bg">![[文件/未命名#^tanc33]]</span>

这是css

/* 修改：复选框显示出来 */
.隐藏-bg-toggle {
  /* 将 display: none; 改为可见的显示方式 */
  display: inline-block; /* 或者使用 block, inline, inline-block 等 */
  width: 3px;
  height: 3px;
  vertical-align: middle; /* 与标签文字垂直对齐 */
  margin-right: 2px; /* 与标签的间距 */
  cursor: pointer;
}

.隐藏-bg {
  display: none;
  background-color: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: var(--size-4-3) var(--size-4-4);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* 复选框选中时显示 */
.隐藏-bg-toggle:checked + .隐藏-bg {
  display: block;
  animation: fadeIn 0.3s ease;
}

.目录-bg {
  color: var(--link-color, #007bff);
  text-decoration: underline !important;
  text-decoration-thickness: 0.06em !important;
  text-underline-offset: 0.15em !important; 
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle; /* 与复选框垂直对齐 */
}

/* 复选框选中状态样式 */
.隐藏-bg-toggle:checked {
  background-color: var(--interactive-accent);
}