it-swarm.com.ru

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

Я добавил 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;
}
16
Ed T.

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

Например,

<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 слева).

7
Ozzy

Я думаю, что вы хотите обернуть их обоих в 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;
}
3
Pattle

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

.imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}
2
Alex Garulli
.imageTwo {
    z-index: 1;
    margin-top: -100px;
}
1
Mr Jones

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

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>

0
Njaal Gjerde

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

скрипка

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

0
David Starkey