將div放置在輸入的右下角

Question

創建時，我需要將Alert div位置放在每個輸入的右上角。

這是創建警報的功能

function createAlert(inputName,errorNumber){
    var lang = getUrlParameter('lang');
    var alertText = {
        error0: {
            pt: "Erro",
            en: "Error",
        },
        error2: {
            pt: "O nome de usuário já está em uso",
            en: "The Username already is being used",
        },
        error3: {
            pt: "O endereço eletrónico já está em uso",
            en: "The Email already is being used",
        },
        error4: {
            pt: "O endereço eletrónico é inválido",
            en: "The Email inserted is invalid",
        },
        error5: {
            pt: "A password não coincide",
            en: "The passwords doesn't match",
        }
    }
    var alert ="<div class='alert' id='error"+errorNumber+"'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\"none\";'>&times;</span>"+alertText["error"+errorNumber][lang]+"</div>";
    if(typeof $('#error'+errorNumber)[0] == 'undefined'){
        $('input[name='+inputName+']').after(alert);
    }else{
        $('#error'+errorNumber).remove();
        $('input[name='+inputName+']').after(alert);
    }
}

CSS

Answer 1

這是一個比CSS更好的javascript解決方案。

閱讀評論以了解

 var alert = $("<div class='alert'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\\"none\\";'>&times;</span>this is error</div>"); var inputName= "sd" $('input[name='+inputName+']').after(alert); // here is to position the alert dynamicly. this is better then css where css dose not work sometimes and get a wrong positions var rect = $('input[name='+inputName+']')[0].getBoundingClientRect(); // input position // now position the alert box under the input alert.css({"left": rect.left, top:rect.height + rect.top , position:"absolute", "min-width": rect.width}); 

 .alert { min-height:100px; border:1px solid red; } div{ margin:auto; width:200px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="text" name="sd" value="" /> <div>