左侧有序列表超链接无法点击问题排查与解决求助

我正在制作学校的HTML课程项目，要做一个展示常用与停用网站的页面。现在遇到个问题：左侧<ol>有序列表里的<a>超链接点不了，但把这个列表用position:relative; left:1px; top:-70px;移到“Websites I use”标题上方时，链接又能正常点击了。想找个列表在标题下方时的解决办法，我的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Cool Page</title>
    <style>
      p { color:red;}
      body {

        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        height: 100vh;
      }

      @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }


      }
      #main-title  { 
        color: paleturquoise;
        text-shadow: 3px -2px black;
        font-size: 50px;  
        text-align:center;
      } 
      #one {
        color: paleturquoise;text-shadow: 2px -1px black; 
        text-decoration: underline; 
        font-size: 35px; 
        text-align:left;
      }
      #two {
        color: paleturquoise;
        text-shadow: 2px -1px black; 
        text-decoration: underline; 
        font-size: 35px; 
        text-align:right;
      } 
      #ol-one {
        text-align:left;
        list-style-position: inside;
      }
      #ol-two {
        text-align: right;
        list-style-position: inside;
      }
      #li-one {
        color: paleturquoise;
        text-shadow: 2px -1px black; 
        text-decoration: underline; 
        font-size: 25px; 
        text-align:left;
      }
      #li-two {
        color: paleturquoise;
        text-shadow: 2px -1px black; 
        text-decoration: underline; 
        font-size: 25px; 
        text-align:right;
      }
      #litext-one {
        color: paleturquoise;
        text-shadow: 2px -1px black; 
        font-size: 18px; 
        text-align:left; 
      }
      #litext-two {
        color: paleturquoise;
        text-shadow: 2px -1px black; 
        font-size: 18px; 
        text-align:right; 
      }
    </style>
  </head>
  <body>
    <div style="position:relative; left:-50px; top:1px;">
      <h1 id="main-title">
        Websites I Use and Used To Use
      </h1>
    </div>
    <div style="position:relative; left:1px; top:2px;">
      <h2 id="one">
        Websites I use
      </h2>
    </div>
    <div style="position:relative; right:20px; top:-66px;">
      <h2 id="two">
        Websites I don't use
      </h2>
    </div>
    <div style="position:relative; left:1px; top:-70px;">
      <ol id="ol-one">
        <li id="li-one">
          <a href="https://code.org">
            Code.org
          </a>
        </li>
        <div id="litext-one">
          Before I came to this school I knew about this website but I had 
          <br>only used it once, now I use it almost everyday for HTML coding.
        </div>
        <li id="li-one">
          <a href="https://soraapp.com">
            Sora
          </a>
        </li>
        <div id="litext-one">
          I use Sora to read books almost everyday.
        </div>
        <li id="li-one">
          <a href="https://code.org">
            Code.org
          </a>
        </li>
        <div id="litext-one">
          Before I came to this school I knew about this website but I had 
          <br>only used it once, now I use it almost everyday for HTML coding.
        </div>
      </ol>  
    </div>
    <div style="position:relative; left:1px; top:-315px;">
      <ol id="ol-two">
        <li id="li-two">
          <a href="https://code.org">
            Code.org
          </a>
        </li>
        <div id="litext-two">
          Before I came to this school I knew about this website but I had 
          <br>only used it once, now I use it almost everyday for HTML coding.
        </div>
        <li id="li-two">
          <a href="https://code.org">
            Code.org
          </a>
        </li>
        <div id="litext-two">
          Before I came to this school I knew about this website but I had 
          <br>only used it once, now I use it almost everyday for HTML coding.
        </div>
        <li id="li-two">
          <a href="https://code.org">
            Code.org
          </a>
        </li>
        <div id="litext-two">
          Before I came to this school I knew about this website but I had 
          <br>only used it once, now I use it almost everyday for HTML coding.
        </div>
      </ol>  
    </div>
  </body>
</html>

• 问题根源：你用position:relative调整右侧标题的位置时，它只是视觉上移到了右边，但元素的原始占位区域还留在左侧，刚好覆盖在左侧列表的链接上面，导致点击事件被右侧标题的div拦截了。
• 快速修复：给左侧列表的容器div加上z-index: 1;，让它的层级高于右侧标题的div，这样链接就能被正常点击了。修改后的容器代码：

<div style="position:relative; left:1px; top:-70px; z-index:1;">

• 新手友好的规范优化建议：
  • 别用position:relative加负top值来凑布局，这种方式很容易出现元素重叠遮挡的问题，后续改起来也麻烦。
  • 可以用CSS浮动（float:left/float:right）或者Flex布局来实现左右分栏，比如把左侧标题和列表放进一个左浮动的容器，右侧标题和列表放进右浮动的容器，这样元素不会互相干扰。
  • 注意：HTML里同一个id不能重复使用（你多次用了#li-one、#litext-one），id是唯一标识，重复会导致样式和功能异常，应该改用class类名，比如把#li-one改成.li-one，CSS里也对应改成.li-one。

内容的提问来源于stack exchange，提问作者Wala