JS 绝对位置与我的 div 冲突答案

【问题标题】：JS absolute position conflicts with my divJS 绝对位置与我的 div 冲突
【发布时间】：2014-04-13 10:08:07
【问题描述】：

当我给一些文本一个绝对位置（使用 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>

【问题讨论】：

标签： javascript text position absolute

【解决方案1】：

Absolutely positioned elements can overlap other elements.

Solved Click to see

解决方法是在另一个div中嵌套两个绝对内容

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>

【讨论】：