想要保持在相同的位置

當我點擊按鈕，有一些文字添加到左上角的ul。想要保持在相同的位置

我的p位於頁面的右側，隨着更多文本（行）的添加，它向下移動。我希望它留在那裏。我應該添加什麼代碼？

<ul id="elementlist"> 
    </ul> 

    <button onclick="addWater()"> Add Water </button> 
    <button onclick="addFire()"> Add Fire </button> 



    <div style="float:right;"> 
    <p>aaaa</p> 
    </div> 
<script type="text/javascript"> 



function addWater() { 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode("Water"); 
    node.appendChild(textnode); 
    document.getElementById("elementlist").appendChild(node); 
} 

function addFire() { 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode("Fire"); 
    node.appendChild(textnode); 
    document.getElementById("elementlist").appendChild(node); 
} 




</script>

來源

2017-01-13 C.Unbay

我試過的位置：絕對沒有工作。 –

住在那裏，你是什麼意思？ –

這是一個js代碼，當我點擊按鈕，就像行添加到ul作爲文本，但是當他們被添加到p下移，我會張貼js代碼太多隻是爲了顯示 –

裹定製DIV中的<p>標籤和應用position: fixed到該分區，調整top和right，使其工作。

.custom-pos { 
 
    position: fixed; 
 
    right: 2%; 
 
    top: 0; 
 
}

<ul id="elementlist"> 
 
</ul> 
 

 
<button onclick="addWater()"> Add Water </button> 
 
<button onclick="addFire()"> Add Fire </button> 
 

 

 

 
<div class="custom-pos"> 
 
<p>aaaa</p> 
 
</div>

來源

2017-01-13 02:04:12 claudios

它的工作謝謝，但有沒有方法做到這一點，而不使用固定的 –

oh nvm！我明白了，我只是改變了'固定'爲'絕對'哇，謝謝你的好代碼 –

您可以使用位置的建議固定（或絕對的），也可以達到使用Flexbox的一樣，如果你能避免支持舊的瀏覽器：

function addWater() { 
 
    var node = document.createElement("LI"); 
 
    var textnode = document.createTextNode("Water"); 
 
    node.appendChild(textnode); 
 
    document.getElementById("elementlist").appendChild(node); 
 
} 
 

 
function addFire() { 
 
    var node = document.createElement("LI"); 
 
    var textnode = document.createTextNode("Fire"); 
 
    node.appendChild(textnode); 
 
    document.getElementById("elementlist").appendChild(node); 
 
}

html, 
 
body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.container { 
 
    overflow: hidden; 
 
    height: 100%; 
 
    display: flex; 
 
} 
 
.content { 
 
    padding: 5px; 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 
.sidebar { 
 
    padding: 5px; 
 
    flex: 0; 
 
}

<div class="container"> 
 
    <main class="content"> 
 
    <ul id="elementlist"> 
 
    </ul> 
 
    <button onclick="addWater()">Add Water</button> 
 
    <button onclick="addFire()">Add Fire</button> 
 
    </main> 
 
    <div class="sidebar"> 
 
    <p>aaaa</p> 
 
    </div> 
 
</div>

來源

2017-01-13 02:40:35

想要保持在相同的位置

回答

相關問題