位置绝对，＆＃34;阴影/虚线框＆＃34;没有缠绕在＆＃34; div＆＃34;

Question

非常好奇我为什么在使用位置：绝对时使用css定位某些东西时，div周围的框偏移到底部：

＆＃13;

＆＃13;

.e-mail {
    position: absolute;
    z-index: 15;
    right: 10%;
    top: 60%;
    transform: translate(-10%, -60%);
}

.contact-form{
    background: #fefefe;
    padding: 10px;
    border-radius: 15px;
    max-width: 400px;
    height: auto;
}

＆＃13;

 <div class="row mail">
                <div class="e-mail">
                    <form class="contact-form " action="#" method="post">
                        <h1>get a quote</h1>
                        <div class="form-group">
                            <input class="form-control" type="text" name="name" placeholder="Full Name">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" name="mail" placeholder="Your E-mail">
                        </div>
                        <div class="form-group">
                            <select class="form-control">
                                <option>Select Option</option>
                                <option>quote one</option>
                                <option>quote two</option>
                                <option>quote three</option>
                                <option>quote four</option>
                            </select>
                        </div>
                        <button class="btn btn-primary mail-submit" type="submit" name="submit" style="width: 100%">Request Quote</button>
                    </form>
                </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

附图将解释我所指的内容。任何建议为什么会发生这种情况并且影响到什么或者是否正常？

感谢] 1