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

Question

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

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

这里有一个 fiddle 说明问题：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 元素

Updated Example

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

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

img in div to push out of top rather than bottom

html

css

twitter-bootstrap

twitter-bootstrap-3