HTML button doesn't work when I add style-CodePudding

I am making a registration form with HTML, PHP, and Javascript, and I found that the button doesn't work when I add style.

here's my HTML code,

...

<form action="signupProcess.php" method="POST" id="signup-form">
        <div >
            <div >
                <label for="id" >ID</label>
                <input name="id" type="text"  id="id" placeholder="~~~">
                <button type="button"  onclick="checkIDDuplication()" style="position:relative; float: right; margin-top: 5px;">ID duplication check</button>
            </div>
            <div >
                <label for="password" >Password</label>
                <input name="password" type="password"  id="password" placeholder="~~~">
            </div>
            <div >
                <label for="passwordCheck" >Password (again)</label>
                <input name="passwordCheck" type="password"  id="password-check"
                    placeholder="~~~">
            </div>
            <div >
                <label for="email" >Email</label>
                <input name="email" type="text"  id="email" placeholder="~~~">
                <button type="button"  onclick="checkEmailDuplication()" style="position:relative; float: right; margin-top: 5px;">Email Duplication check</button>
            </div>

            <div >
                <button type="button" id="signup-button"  style="position:relative; text-align: center; margin-top: 100px;">Register!</button>
            </div>
        </div>

...

and here's my Javascript file which checkIDDuplication() and checkEmailDuplication() exists.

// ID check
function checkIDDuplication() {

    let id = document.getElementById("id").value;

    if (id) {
        url = "checkID.php?id="   id;
        window.open(url, "check ID", "top=50, left=50, width=300, height=100");
    } else {
        alert("Enter ID first");
    }

    return;

}

//Email check
function checkEmailDuplication() {
 
    let email = document.getElementById("email").value;

    if (email) {
        url = "checkEmail.php?email="   email;
        window.open(url, "check Email", "top=50, left=50, width=300, height=100");
    } else {
        alert("Enter Email First");
    }

    return;

}

But oddly, The button which checks Email duplication doesn't work(can't click) whereas which checks ID duplication works perfectly.

(ID check)

<button type="button"  onclick="checkIDDuplication()" style="position:relative; float: right; margin-top: 5px;">ID 중복 검사</button>

(Email check)

<button type="button"  onclick="checkEmailDuplication()" style="position:relative; float: right; margin-top: 5px;">Email Duplication check</button>

But I found that Email check button works when I delete whole style attribute of the button like

<button type="button"  onclick="checkEmailDuplication()">Email Duplication check</button>

Isn't it strange? How should I solve this problem? I need some help.

Thank you.

CodePudding user response：

The div containing the Register-button is overlapping the checkEmailDuplication-button. Instead of only adding a top margin to the Register-button, add a top margin to the div containing it to solve this:

<div >
    <button type="button" id="signup-button"  style="position: relative; text-align: center; margin-top: 50px">
    Register!
</button>
</div>

Edit: a cleaner solution might be to change the div bottom-margin of the div containing the checkEmailDuplication-button from md-3 to md-5.