JS绝对位置与我的div冲突

Question

当我给一些文本一个绝对位置（使用JS）时，它似乎失去了它在div中的一些属性。主要问题是文本不再包装，而是超出div限制。

这里是完整的代码安排，所以你可以复制粘贴，如果你想尝试（不需要CSS）：

<head>
  <script>
    var longtext;

    function positionText() {
      document.getElementById("longtext").style.position = "absolute";
      document.getElementById("longtext").style.top = 200 + "px";
    }
  </script>
</head>


<body>

  <div id="wrapper">
    <div id="main">

      <div id="left" style="float:left; width:15%;">
        Some text to fill this div, as you can see it will wrap by itself unless your monitor is fricken huge

        <span id="longtext">Long text that starts at a certain height, and has to be wrapped to remain within this div width</span>
      </div>

      <div id="mid" style="float:left; width:70%;" ;>
        <h2> Some head </h2>
        <p>Some text 1</p>
        <p>Some text 2</p>
        <p>Some text 3</p>
        <p>Some text 3</p>
        <p>Some text 3</p>
        <p>Some text 3</p>
        <p>Some text 3</p>
      </div>

      <div id="right" style="float:left; width:15%;">
        Rrrrrrrright
      </div>
    </div>

  </div>

  <script>
    positionText()
  </script>
</body>