web-dev-qa-db-fra.com

CSS place une image sur une autre

Je travaille sur un modèle de conception CSS.

J'ai deux images imageOne et imageTwo.

Les deux sont position: relative car si je règle l'un d'eux position: absolute, il ne restera plus aussi réactif et la réactivité est la clé ici.

Ce que je veux, c'est placer imageTwo sur imageOne.

Comment puis-je atteindre cet objectif alors que la fonctionnalité réactive de twitterbootstrap fonctionne toujours sur ces deux images?

Voici mon code: (jsfiddle disponible ici )

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

J'ai ajouté un wrapper div pour ces images, avec une position relative et changé .image { position: relative en absolute et cela a fonctionné pour moi . http://jsfiddle.net/uS7nw/2/

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

Et

.container {
    position: relative;
}

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

Lorsque vous avez des éléments dans une container qui a la propriété: position: relative;
puis tous les éléments de ce conteneur qui ont la propriété: position: absolute;
aura leur origine d'origine définie en haut à gauche du conteneur.

Par exemple,

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

Le premier enfant absolu sera positionné à (50px, 100px) par rapport à body ou à (0,0) à partir de container. 

Mais le deuxième enfant sera positionné à (10px, 20px) par rapport à container ou à (60px, 120px) par rapport à body (ajouter 50 + 10 du haut, 100 + 20 de la gauche).

7
Ozzy

Je pense que vous voulez envelopper les deux dans une div avec position:relative

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

Puis donnez aux deux images une position absolue

.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

Si vous avez une image sensible dans un conteneur et souhaitez placer une autre image par-dessus cette 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>

0
Njaal Gjerde

Remplacez position: relative; par position: absolute;

violon

Si vous voulez toujours une position relative, placez l'absolu dans une autre div.

0
David Starkey