div 中的 img 从顶部而不是底部推出

Question

如果div中的图像高度大于包含它的div，如何定位图像使其重叠在div的顶部而不是底部？

我正在使用 Twitter 引导程序，我希望导航栏中的品牌形象与导航栏顶部重叠。默认情况下，它重叠在底部。我也想控制它的重叠程度，这样我就可以正确定位它。

这里有一个小提琴来说明这个问题：http://jsfiddle.net/gwg7L56o/

基本上，我希望猫从导航栏的顶部而不是底部重叠。

<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img class="MyLogo" src="https://s-media-cache-ak0.pinimg.com/236x/4a/72/2e/4a722e9cc6af9f7a1be902b51da5d04a.jpg"></a>
    </div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">HOME</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SERVICES <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Cutting & Styling</a></li>
                        <li><a href="#">Coloring</a></li>                               
                        <li><a href="#">Permanent Hair Straightening & Relaxing</a></li>
                        <li><a href="#">Balmain Hair Extensions</a></li>
                    </ul>
            </li>
            <li>
                <a href="#">WEDDING DAY</a>
            </li>
            <li>
                <a href="#">BLOG</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

您可以相对定位父元素，.navbar-brand ，然后用 bottom: 0 绝对定位子元素img元素：

更新的示例

.navbar-brand {
    position: relative;
}
.navbar-brand > img {
    position: absolute;
    bottom: 0;
}