2014-04-13 20 views
0

當我給一些文本絕對位置(使用JS)時,它似乎失去了它在div中的一些屬性。主要問題是文本不會換行,而是超出div限制。JS絕對位置與我的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> 

任何想法? TY!

回答

0
Absolutely positioned elements can overlap other elements. 

Solved Click to see

解決方案是在另一個DIV 2窩絕對含量

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