How do I position a div in the same relative position across browsers-CodePudding

The following markup displays the checkbox in a different position onscreen (relative to other elements on the screen) in Chrome vs Edge:

<div
    <label >
        <input type="checkbox" onclick="passwordOne(); 
          passwordTwo()">
    </label> Show Password
</div>

I need them to be more or less in the same spot in every browser ---not significantly different. I've used pixels and % instead of em, but I get the same inconsistent positioning. How can I fix this?

CodePudding user response：

There several things in your html. Way label / input is written is "strange"! You have a div, display block is the default If you put top -20em, that means you have your div out of view on top of -20em (if std em at 1em = 16px, that means 320px out of view on top of your screen

#test {
  position: absolute;
  top: 20em;
  right: 5em;
  background-color: #7b8e91;
}

<div id="test">
  <input type="radio" id="html" value="HTML">
  <label for="html">HTML</label>
</div>

Here position is absolute. Normally you should put absolute inside a relative. Absolute put the element out of the html flow, so in relative that limits to the parent boundary. Here it's absolute of nothing, meaning it's absolute of page. You can test in chrome, edge, safari, firefox,... same

CodePudding user response：

I was able to solve the issue by placing the div inside of a Form (instead of outside of the Form). Once I did that, the relative position in Chrome and Edge were the same.