CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
Webbly Brown
Webbly Brown

Reputation: 1002

Position of absolute element inside bootstrap container

I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.

Here is my code:

<div id="header">
    <div class="container">
        <img src="header-icon.png" class="header-icon" />
    </div>
</div>

#header {
  background-image: url('cover.jpg');
  background-size: cover;
  height: 300px;
  position: relative;

 .header-icon {
   position: absolute;
   bottom: 0;
 }
}

Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.

I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.

Upvotes: 0

Views: 3222

Answers (2)

Nikola Kostov
Nikola Kostov

Reputation: 418

Is this what you are looking for jsfiddle, this is the code i added

#header .container {
 position: relative;
 height: 400px;
 }

Upvotes: 1

Auroratide
Auroratide

Reputation: 2577

I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.

position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:

#header .container {
  position: relative;
}

Also, the code you posted seems to be missing a </div>.

Upvotes: 2

Related Questions