CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Matt Hall
Matt Hall

Reputation: 2412

img in div to push out of top rather than bottom

If an image within in a div has a height greater than the div containing it, how can I position the image so it overlaps out the top of the div rather than the bottom?

I'm using twitter bootstrap and I'd like my brand image in the navbar to overlap out of the top of the navbar. By default it overlaps out the bottom. I'd like to control how much it overlaps too, so I can position it correctly.

Here's a fiddle illustrating the issue: http://jsfiddle.net/gwg7L56o/

Basically I want the cat to overlap out of the top of the navbar rather than the bottom.

<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>

Upvotes: 1

Views: 96

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

You could relatively position the parent element, .navbar-brand, and then absolutely position the child img element with bottom: 0:

Updated Example

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

Upvotes: 2

Related Questions