CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Om3ga
Om3ga

Reputation: 32951

CSS placing one image on top of another

I am working on CSS design template.

I have two images imageOne and imageTwo.

Both are position: relative because if I set one of them position: absolute then it does not stay as responsive anymore and responsiveness is the key here.

What I want is to place imageTwo on top of imageOne.

How can I achieve that while twitterbootstrap's responsive feature still works on these two images?

Below is my code: (jsfiddle available here)

<div class="imageOne image"></div>
<div class="imageTwo image"></div>

CSS

.image {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

Upvotes: 21

Views: 121935

Answers (7)

Njaal Gjerde
Njaal Gjerde

Reputation: 673

If you have a responsive image in a container and want to place another image on top of that image:

HTML:

.container {
  position: relative;
  width: 100px;/*Or whatever you want*/
}
.imageOne {
  width: 100%;
}
.imageTwo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <img class="imageOne" src="https://www.google.no/images/srpr/logo11w.png">
  <img class="imageTwo" src="https://news.ycombinator.com/y18.gif">
</div>

Upvotes: 4

Ozzy
Ozzy

Reputation: 8322

When you have elements within a container which has the property: position: relative;
then any elements within that container which have the property: position: absolute;
will have their offset origin set to the top-left of the container.

For example,

<div class="relative"> <!-- top: 50px; left: 100px; //-->
  <div class="absolute"></div> <!-- top: 0; left: 0; //-->
  <div class="absolute"></div> <!-- top: 10px; left: 20px; //-->
</div>

The first absolute child will be positioned at (50px, 100px) relative to the body, or (0,0) from the container.

But the second child will be positioned at (10px, 20px) relative to container, or (60px, 120px) relative to the body (add 50+10 from the top, 100+20 from the left).

Upvotes: 9

Mr Jones
Mr Jones

Reputation: 1198

.imageTwo {
    z-index: 1;
    margin-top: -100px;
}

Upvotes: 1

Ed T.
Ed T.

Reputation: 1039

I've added a wrapper div for those images, with position relative and changed .image { position: relative to absolute and it worked for me. http://jsfiddle.net/uS7nw/2/

<div class="container">
    <div class="imageOne image"></div>
    <div class="imageTwo image"></div>
</div>

And

.container {
    position: relative;
}

.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

Upvotes: 26

Pattle
Pattle

Reputation: 6014

I think you want to wrap both of them in a div with position:relative

<div style="position:relative">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>

Then give both of the images an absolute position

.image {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid red;
}

Upvotes: 3

Alex Garulli
Alex Garulli

Reputation: 757

http://jsfiddle.net/uS7nw/4/

.imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}

Upvotes: 2

David Starkey
David Starkey

Reputation: 1840

Change position: relative; to position: absolute;

fiddle

If you still want a relative position, wrap the absolute in another div.

Upvotes: 0

Related Questions