在任何屏幕大小或缩放百分比下，使按钮成为另一个元素的末尾

Question

我有以下代码：

function createalert(content){
let divs = document.createElement('div')
let btn = document.createElement('button')
divs.id = 'alerts'
btn.id='clearbutton'
btn.textContent = 'X'
divs.textContent = content
document.body.appendChild(divs)
divs.appendChild(btn)
btn.addEventListener('click', ()=>{divs.remove()})
}
createalert('Hello, world!')

#alerts{
width: 40vw;
text-align: center;
font-size: 20px;
position: absolute;
top: 1%;
left: 30%;
background:grey
}
#clearbutton{
height: 4vh;
position: relative;
left: 26%;
bottom: 10%;
color: black;
border: none;
background: transparent;
font-weight:bold ;
font-size: 25px;
}

我想要实现的是使用JS创建一个包含按钮的自定义警报。

我想让按钮在任何屏幕大小或zoom百分比下都是div(警报(的末尾。

我尝试使用%和vw来实现它，但我没能做到，这个css代码只能在我的屏幕大小下工作。

有人能给我一个解决方案吗？

感谢您的回复！

Answer 1

您可以通过定位来实现，设置#alerts位置relative和#clearButton位置absolute和right:0；像这样：

function createalert(content) {
let divs = document.createElement('div')
let btn = document.createElement('button')
divs.id = 'alerts'
btn.id = 'clearbutton'
btn.textContent = 'X'
divs.textContent = content
document.body.appendChild(divs)
divs.appendChild(btn)
btn.addEventListener('click', () => {
divs.remove()
})
}
createalert('Hello, world!')

#alerts {
width: 40vw;
text-align: center;
font-size: 20px;
position: absolute;
top: 1%;
left: 30%;
background: grey;
position:relative;
}
#clearbutton {
position: absolute;
right: 0;
color: black;
border: none;
background: transparent;
font-weight: bold;
font-size: 22px;
}

你可以更多地了解这个技巧https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

我想最简单的方法是使用float。

function createalert(content) {
let container = document.createElement("div");
let btn = document.createElement("button");
container.id = "alerts";
btn.id = "clearbutton";
btn.textContent = "X";
container.textContent = content;
document.body.appendChild(container);
container.appendChild(btn);
btn.addEventListener("click", () => {
container.remove();
});
}
createalert("Hello, world!");

#alerts {
width: 40vw;
text-align: center;
font-size: 20px;
position: absolute; 
top: 1%;
left: 30%;
background: grey;
}
#clearbutton {
height: 4vh;
color: black;
border: none;
background: transparent;
font-weight: bold;
font-size: 25px;
float: right;
}