Question

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

这里列出了完整的代码，以便您可以尝试复制粘贴（如果您不需要css）：

＆＃13;

<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>

＆＃13;

Answer 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>

JS绝对位置与我的div冲突

1 个答案: