ANKI CSS / HTML:如何在浏览器的右下角“位置:固定”中制作标签,而标签不重叠?

问题描述

有关问题的更多详细信息,请参见视频: try_emplace

我所有的标签都在查看中可见,但我希望它们位于右下角的固定位置(即不会随着滚动而移动)。当我尝试此操作时,它们全部重叠在右下角,我如何将它们分开?

我对HTML / CSS不太了解,这是我常识所能做到的,请回答尽可能具体,包括代码吗?如果没有的话,也很好,谢谢您的时间。

前端代码(HTML):

/* TAGS */
/* Clickable Tags (need to download the add-on) */
kbd {
  display: inline-block;
  letter-spacing: .2px;
  font-weight: bold;
  font-size: 16px !important;
  text-shadow: none !important;
  padding: 0.05rem 0.1rem !important;
  margin: 1px !important;
  border-radius: 4px;
  border-width: 1.5px !important;
  border-style: solid;
  background-color: transparent !important;
  Box-shadow: none !important;
  opacity: 0.5;
  vertical-align: right;
   word-break: break-all;
}


/* Tag Becomes More Visible On Hover */
kbd:hover { opacity: 1; transition: opacity 0.2s ease; }


/* Tag Colors */
kbd:nth-of-type(1n+0) { border-color: #fc00ff; color: #fc00ff; }
kbd:nth-of-type(2n+0) { border-color: #03A9F4; color: #03A9F4; }
kbd:nth-of-type(3n+0) { border-color: #FF0000; color: #FF0000; }
kbd:nth-of-type(4n+0) { border-color: #faed27; color: #faed27; }
kbd:nth-of-type(5n+0) { border-color: #FF9933; color: #FF9933}
kbd:nth-of-type(6n+0) { border-color: #ff6ec7; color: #ff6ec7; }
kbd:nth-of-type(7n+0) { border-color: #8ffcff; color: #8ffcff; }
kbd:nth-of-type(8n+0) { border-color: #ff009a; color: #ff009a; }
kbd:nth-of-type(9n+0)  { border-color: #39ff14; color: #39ff14; }
kbd:nth-of-type(10n+0) { border-color: #1b03a3; color: #1b03a3; }


/* Tag Mobile Adjustments */
.mobile kbd { opacity: .9; margin: 1px !important; display: inline-block; font-size: 14px !important; }
.mobile #tags-container {line-height:0.6rem; margin-left: 0px; }

样式代码(CSS):

{{1}}

解决方法

position: fixed应用于其容器,而不应用于元素本身。如果没有专用的容器,请创建一个...

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...