在textarea中定位警报框

Question

我在textarea中放置了一个警告框，其中包含以下代码：

CSS：

#alertBox {
    width: 30%;
    height: 12%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 40px;
    background-color: #0075bf;
    color: white;
    text-align: center;
    font-size: 20px;
}
#template {
    font-family: Lato Regular;
    width: 70%;
    margin: auto;
    margin-top: 10%;
}
/* Medium,Small and Extra Small Devices */

@media (max-width: 992px) {
    #alertBox {
        width: 100%;
        margin-left: 3%;
        margin-right: 10%;
    }

    #template {
        width: 100%;
        margin-top: 5%;
    }
}

HTML：

   <div class="container">
   <article id="template">
    <form role="form">
        <fieldset class="form-group">
            <h5 for="myOffer">Mon offre</h5>
            <div id="alertBox" class="alert alert-info">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> Merci de compléter votre offre avant de cliquer sur envoyer
            </div>
            <textarea class="form-control" rows=" 13 " id="myOffer "></textarea>
        </fieldset>
    </form>  
    </article>
    </div> 

但是，当我调整表单大小时，警告框不会在textarea中正确定位。

以下是最终结果的样子：

有什么建议吗？

Answer 1

这样做的正确方法是将fieldset宽度和位置设置为这样，并设置为textarea宽度100％：

fieldset {
    position:relative;
    width: 600px; //for example
}
textarea {
    width:100%;
}

然后你的arelt框对于元素<fieldset>是绝对的。当您在某个时刻调整窗口大小时fieldset将是100％，并且您的警报框将位于其中间。