CSS, помещая одно изображение поверх другого

Я работаю над шаблоном дизайна CSS.

У меня есть два изображения imageOne и imageTwo.

Оба являются position: relative, потому что, если я устанавливаю один из них position: absolute, тогда он не будет оставаться таким же отзывчивым, а отзывчивость - это ключ.

Я хочу разместить imageTwo поверх imageOne.

Как я могу добиться этого, хотя функция twitterbootstrap реагирует на эти два изображения?

Ниже мой код: (jsfiddle доступен здесь)

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

Ответы

Ответ 1

Я добавил обертку div для этих изображений, с относительным положением и измененным .image { position: relative до absolute, и это сработало для меня. http://jsfiddle.net/uS7nw/2/

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

.container {
    position: relative;
}

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

Ответ 2

Когда у вас есть элементы внутри container, у которого есть свойство: position: relative;
то любые элементы внутри этого контейнера, которые обладают свойством: position: absolute;
будет иметь начало смещения, установленное в верхнем левом углу контейнера.

Например,

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

Первый абсолютный ребенок будет располагаться на (50px, 100px) относительно body или (0,0) от container.

Но второй ребенок будет располагаться на (10px, 20px) относительно container или (60px, 120px) относительно body (добавьте 50 + 10 сверху, 100 + 20 слева).

Ответ 3

Я думаю, вы хотите обернуть оба из них в div с помощью position:relative

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

Затем дайте обеим изображениям абсолютное положение

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

Измените position: relative; на position: absolute;

fiddle

Если вы все еще хотите относительное положение, оберните абсолют в другой div.

Ответ 7

Если у вас есть отзывчивое изображение в контейнере и вы хотите поместить другое изображение поверх этого изображения:

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>