CSS à placer une image sur le dessus de l'autre

Je suis en train de travailler sur le CSS modèle de conception.

J'ai deux images imageOne et imageTwo.

Les deux sont position: relative parce que si j'ai mis l'un d'eux position: absolute ensuite, il ne reste pas répondre le plus et la réactivité est la clé ici.

Ce que je veux, c'est l'endroit imageTwo sur le dessus de imageOne.

Comment puis-je réaliser que tout twitterbootstrap réactif fonctionnalité fonctionne encore sur ces deux images?

Ci-dessous 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;
}
je pense que c'est ce que tu veux: jsfiddle.net/29u8S

OriginalL'auteur 2619 | 2013-08-14

  1. 16

    J'ai ajouté un wrapper div pour ces images, avec la position relative et changé .image { position: relative à absolute et il a travaillé 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;
}
    Je pense que le PO ne voulez pas utiliser la position:absolute

    OriginalL'auteur Ed T.

  2. 7

    Lorsque vous avez des éléments à l'intérieur d'un container qui a la propriété: position: relative;

    alors que tous les éléments à l'intérieur de ce récipient qui ont la propriété: position: absolute;

    ont leur décalage d'origine est le coin supérieur 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>

    La première absolu enfant sera positionné à l' (50px, 100px) par rapport à la body, ou de (0,0) à partir de la container.

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

    OriginalL'auteur Ozzy

  3. 3

    Je pense que vous voulez enchaîner les deux dans un div avec position:relative

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

    Puis donner à la fois des images d'une position absolue

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

    OriginalL'auteur Pattle

  4. 2

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

    .imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}
    que la div ne sont pas image
    qu'une classe appelée .imageTwo vous pouvez appliquer à tout élément du DOM vous voulez
    peut être comme ça <image src="../" class="imageTwo"> ?
    yep exactement ou <div class="imageTwo"> ...</dv> -- 😀

    OriginalL'auteur Alex Garulli

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

    OriginalL'auteur Mr Jones

  6. 0

    Changement position: relative; à position: absolute;

    violon

    Si vous voulez toujours une position relative, enveloppez-la d'absolu dans un autre div.

    OriginalL'auteur David Starkey