Make a button to be end of another element at any screen size or zoom percentage-CodePudding

I have the following code:

 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;
    }

What I want to achieve it to create a custom alert using JS that include a button.

I want to make the button to be end of the div (alert) at any screen size or zoom percentage.

I try to use % and vw to acheive it, but I fail to do that, this css code will only work at my screen size.

Could anyone give me a solution to solve this?

Thanks for any responds!

CodePudding user response：

You can do it by positioning, set the #alerts position relative and #clearButton position absolute and right:0; like this:

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;
}

you can learn about this trick more https://css-tricks.com/absolute-positioning-inside-relative-positioning/

CodePudding user response：

I guess the simplest is to use 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;
}