Problema sovrapposizione elementi html

[DanieleSestri]

Immagine.jpg

<div class="col-sm-4">
                            <div class="panel panel-default" style="margin-bottom: 0px;">
                                <div class="panel-body">
                                    <img src="images/5.jpg" alt="..." style="max-width: 100%; max-height: 100%; align:center;">
                                </div>
                            </div>
                            <p style="padding:10px; position: relative; width: 100%; top: -11em; text-align: center; background: rgba(246, 246, 246, 0.90);">
                                <strong style="color: red; font-size: 22px;">Dresses</strong><br>
                                <strong style="color: black; text-decoration: underline">Shop Now</strong>
                            </p>
                        </div>