webentwicklung-frage-antwort-db.com.de

CSS, das ein Bild über ein anderes platziert

Ich arbeite an CSS-Designvorlagen.

Ich habe zwei Bilder imageOne und imageTwo.

Beide sind position: relative, denn wenn ich einen von ihnen position: absolute setze, bleibt er nicht mehr so ​​reaktionsschnell und Reaktionsfähigkeit ist hier der Schlüssel.

Ich möchte imageTwo auf imageOne platzieren.

Wie kann ich das erreichen, während die responsive Funktion von twitterbootstrap auf diesen beiden Bildern noch funktioniert?

Unten ist mein Code: (jsfiddle verfügbar hier )

<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

Ich habe ein Wrapper-Div für diese Bilder mit relativer Position hinzugefügt und .image { position: relative in absolute geändert. Das hat für mich funktioniert . http://jsfiddle.net/uS7nw/2/

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

Und

.container {
    position: relative;
}

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

Wenn Sie Elemente in einer container haben, die die Eigenschaft hat: position: relative;
dann alle Elemente in diesem Container, die die Eigenschaft haben: position: absolute;
Bei wird der Versatz Origin auf die linke obere Ecke des Containers gesetzt.

Zum Beispiel,

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

Das erste absolute Kind wird bei (50px, 100px) relativ zur body oder (0,0) von der container positioniert. 

Das zweite Kind wird jedoch bei (10px, 20px) relativ zu container oder (60px, 120px) relativ zu body positioniert (addiere 50 + 10 von oben, 100 + 20 von links).

7
Ozzy

Ich denke, Sie wollen beide in ein div mit position:relative einwickeln.

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

Dann geben Sie beiden Bildern eine absolute Position

.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

Wenn Sie ein responsives Bild in einem Container haben und ein anderes Bild auf dieses Bild setzen möchten

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; in position: absolute; ändern

Geige

Wenn Sie immer noch eine relative Position wünschen, wickeln Sie das Absolute in eine andere div ein.

0
David Starkey