Html 希望p保持在同一位置

当我单击按钮时，左上角的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>

加水
加火
aaaa

函数addWater（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“水”）；
node.appendChild（textnode）；
document.getElementById（“elementlist”）.appendChild（节点）；
}
函数addFire（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“Fire”）；
node.appendChild（textnode）；
document.getElementById（“elementlist”）.appendChild（节点）；
}

将

标签包装在自定义div内，并将

位置：fixed

应用到该div中，然后调整

顶部

和

右侧

，使其正常工作

。自定义pos{
位置：固定；
右：2%；
排名：0；
}

加水
加火
aaaa

将

标签包装在自定义div内，并将

位置：fixed

应用到该div中，然后调整

顶部

和

右侧

，使其正常工作

。自定义pos{
位置：固定；
右：2%；
排名：0；
}

加水
加火
aaaa

您可以按照建议使用固定位置（或绝对位置）， 或者，如果可以避免支持旧浏览器，您也可以使用flexbox实现同样的功能：

函数addWater（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“水”）；
node.appendChild（textnode）；
document.getElementById（“elementlist”）.appendChild（节点）；
}
函数addFire（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“Fire”）；
node.appendChild（textnode）；
document.getElementById（“elementlist”）.appendChild（节点）；
}

html，
身体{
保证金：0；
溢出：隐藏；
身高：100%；
}
.集装箱{
溢出：隐藏；
身高：100%；
显示器：flex；
}
.内容{
填充物：5px；
弹性：1；
溢出：自动；
}
.侧边栏{
填充物：5px；
弹性：0；
}

加水
加火
aaaa

您可以按照建议使用固定位置（或绝对位置）， 或者，如果可以避免支持旧浏览器，您也可以使用flexbox实现同样的功能：

函数addWater（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“水”）；
node.appendChild（textnode）；
document.getElementById（“elementlist”）.appendChild（节点）；
}
函数addFire（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“Fire”）；
node.appendChild（textnode）；
document.getElementById（“elementlist”）.appendChild（节点）；
}

html，
身体{
保证金：0；
溢出：隐藏；
身高：100%；
}
.集装箱{
溢出：隐藏；
身高：100%；
显示器：flex；
}
.内容{
填充物：5px；
弹性：1；
溢出：自动；
}
.侧边栏{
填充物：5px；
弹性：0；
}

加水
加火
aaaa

我试过position:absolute不起作用。你说停留在那里是什么意思？当我点击按钮时，这是一个js代码，就像是将行作为文本添加到ul中，但当它们被添加时，p向下移动，我也会发布js代码只是为了显示我已经尝试过position:absolute不起作用。你说停留在那里是什么意思？当我点击按钮时，这是一个js代码，就像是将行作为文本添加到ul中，但是当它们被添加时，p会向下移动，我也会发布js代码只是为了显示它起作用。谢谢，但是有没有办法不用fixedoh nvm就可以做到这一点！我明白了，我只是把“固定”改成了“绝对”哇谢谢很好的代码它工作了谢谢但是有没有办法不用fixedoh nvm！我明白了，我只是把“固定”改成了“绝对”哇，谢谢，代码不错