堆叠验证消息

Question

我有以下样式将asp.net验证显示为弹出窗口。

    .triangle-right.top::after
    {
        border-color: transparent #f00;
        border-width: 10px 0 0 10px;
        bottom: auto;
        left: 15px;
        top: -8px;
    }
    .triangle-right::after
    {
        border-color: #f00 transparent;
        border-style: solid;
        border-width: 20px 0 0 20px;
        bottom: -20px;
        content: "";
        display: block;
        left: 50px;
        position: absolute;
        width: 0;
    }
    .triangle-right.top
    {
        background: #f00 none repeat scroll 0 0;
    }
    .triangle-right
    {
        background: #f00 none repeat scroll 0 0;
        border-radius: 4px;
        color: #fff;
        height: 28px;
        padding: 5px 10px;
        position: relative;
        top: 40px;
        z-index: 1000;
    }
</style>

以下是我如何使用此CSS。

    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                            ControlToValidate="FirstName" ErrorMessage="First Name is required" ForeColor="#FFFFFF"
                             CssClass="triangle-right top"></asp:RequiredFieldValidator>

这就是它的显示方式
这很有效，直到我只有一条消息要显示。在某些情况下，控件可能不会遵循多个验证。因此，所有错误消息都会突然出现在另一个上面。任何人都可以帮我解决这个问题吗？