HTML button doesn't work when I add style

Question

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 class="w-50 ml-auto mr-auto mt-5">
            <div class="mb-3 ">
                <label for="id" class="form-label">ID</label>
                <input name="id" type="text" class="form-control" id="id" placeholder="~~~">
                <button type="button" class="btn btn-secondary" onclick="checkIDDuplication()" style="position:relative; float: right; margin-top: 5px;">ID duplication check</button>
            </div>
            <div class="mb-3 ">
                <label for="password" class="form-label">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="~~~">
            </div>
            <div class="mb-3 ">
                <label for="passwordCheck" class="form-label">Password (again)</label>
                <input name="passwordCheck" type="password" class="form-control" id="password-check"
                    placeholder="~~~">
            </div>
            <div class="mb-3 ">
                <label for="email" class="form-label">Email</label>
                <input name="email" type="text" class="form-control" id="email" placeholder="~~~">
                <button type="button" class="btn btn-secondary" onclick="checkEmailDuplication()" style="position:relative; float: right; margin-top: 5px;">Email Duplication check</button>
            </div>

            <div class="col text-center">
                <button type="button" id="signup-button" class="btn btn-primary mb-3" 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" class="btn btn-secondary" onclick="checkIDDuplication()" style="position:relative; float: right; margin-top: 5px;">ID 중복 검사</button>

(Email check)

<button type="button" class="btn btn-secondary" 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" class="btn btn-secondary" onclick="checkEmailDuplication()">Email Duplication check</button>

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

Thank you.

Answer 1

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 class="mt-5 col text-center">
    <button type="button" id="signup-button" class="btn btn-primary" 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.