Question

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

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

这是一个说明问题的小提琴：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，然后使用img绝对定位子bottom: 0元素：

Updated Example

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

img in div推出顶部而不是底部

1 个答案: