Absolutely Position Elements Over A Specific Letter

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

Details

• GOAL: Figure out how to position an element directly over another letter in a monospaced layout
• The example below is built directly from the HTML and JavaScript code snippets that follow

HTML Source

<div id="foundation">
  <div id="movingElement">x</div>
  <div id="letters">
    <pre>
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz</pre
    >
  </div>
</div>

CSS Source

#foundation {
  position: relative;
  margin: 0;
  padding: 0;
}

#movingElement,
pre {
  font-family: monospace;
  font-size: 1.2rem;
  line-height: 2rem;
  margin: 0;
  padding: 0;
}

#movingElement {
  position: absolute;
  left: 14ch;
  top: 8rem;
}

JavaScript Source

const init = () => {
    console.log("init")
}

document.addEventListener('DOMContentLoaded', init)

References