html 标签 anki,ANKI CSS/HTML: How to make Tags in browser "Position: fixed" in the bottom right corner...

See video for more detail on question:

https://streamable.com/td4k8j

I have all my tags visible on review, but I want them in the fixed position (i.e. doesn't move with scroll) in the bottom right. When I try this, they all overlap in the bottom right, how can I separate them?

I don't know a lot about HTML/CSS, and this is as far as I could get with common sense, please could answers be as specific as possible including the code? It's fine if not, thank you for your time.

Front Code (HTML):

{{Tags}}

var tagContainer = document.getElementById("tags-container")

if (tagContainer.childElementCount == 0) {

var tagList= tagContainer.innerHTML.split(" ");

var kbdList = [];

var newTagContent = document.createElement("div");

for (var i = 0; i < tagList.length; i++) {

var newTag = document.createElement("kbd");

newTag.innerHTML = tagList[i];

newTagContent.append(newTag)

}

tagContainer.innerHTML = newTagContent.innerHTML;

tagContainer.style.cursor = "default";

}

{{/Tags}}

Styling Code (CSS):

/* 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; }