追加DIV不正確位於

我的代碼：追加DIV不正確位於

<body>          
    <div id ="container" style="position:relative;margin-top:50px;width:100px;height:100px;border: 2px solid #a1a1a1;"/> 
    <button onclick="myFunction()">Append</button>    

<script type="text/javascript" language="javascript"> 

     function myFunction() { 
      var tooltipdivRect = $("<div id=" + "ToolTip></div>"); 
      $(tooltipdivRect).css('top', '20px', 'left', '0px', 'width', '20px', 'height', '20px', "border-color", 'red', 'border', '2px solid #a1a1a1', 'position', 'absolute'); 
      $(tooltipdivRect).html("check") 
      document.getElementById("container").appendChild(tooltipdivRect[0]); 
     } 
    </script>    
</body>

當我追加提示div它不能追加的確切位置。我設置的位置上方20，但它在50追加...因爲父div的位置相對...我需要追加工具提示div確切位置我提到

如何解決這個問題，而不改變位置（父母和孩子）？

來源

2015-02-24 Akbar Basha

如果您使用jQuery，請相應標記問題。 – j08691 2015-02-24 18:23:34

我認爲問題是.css（）調用。唯一適用於您的元素的樣式是頂部：20px。

Fiddle

這是你的方法調用：

$(tooltipdivRect).css('top', '20px', 'left', '0px', 'width', '20px', 'height', '20px', "border-color", 'red', 'border', '2px solid #a1a1a1', 'position', 'absolute');

這是它需要一個對象的內部CSS樣式的方式。

$(tooltipdivRect).css({ 
    'top': '50px', 
    'left': '0px', 
    'width': '20px', 
    'height': '20px', 
    "border-color": 'red', 
    'border': '2px solid #a1a1a1', 
    'position': 'absolute' 
});

來源

2015-02-24 18:19:31 dowomenfart

所以，讓我們說你只是想插入提示到您的div #container

你正在做它試圖手動插入行爲類似提示一個div的方式。當你創建它時：var tooltipdivRect = $("<div id=" + "ToolTip></div>");

我的建議是要麼你做一些更乾淨，如：

function myFunction() { 
    var tooltipdivRect = $("<div id='manualTooltip'></div>"); 
    $(tooltipdivRect).html("check") 
    $("#container").append(tooltipdivRect); 
}

使用提取的CSS是這樣的：

#manualTooltip { 
    top : 20px; 
    left : 0px; 
    width: 20px; 
    height: 20px; 
    border-color: red; 
    border: 2px solid #a1a1a1; 
    position: absolute; 
}

OR您只需設置一個標題爲您的div容器：

function appendTitleToDiv(){ 
    $("#container").attr("title", "check"); 
}

您可以看到兩個解決方案h在這個小提琴中：http://jsfiddle.net/epbuw2sm/

來源

2015-02-24 18:32:16 jmartins

我需要顯示出div（容器）的工具提示...沒有改變位置..... – 2015-02-25 01:24:22

，因爲我用位置作爲絕對.... – 2015-02-25 01:25:09

所以，當你點擊按鈕，你需要顯示你的工具提示正下方（不在裏面）的div容器？ – jmartins 2015-02-25 12:07:27

追加DIV不正確位於

回答

相關問題