web-dev-qa-db-ja.com

1つの画像を別の画像の上に配置するCSS

CSSデザインテンプレートに取り組んでいます。

2つの画像imageOneとimageTwoがあります。

両方ともposition: relativeそのうちの1つを設定するとposition: absoluteそれから、それはもはや反応するように留まらず、反応性がここで重要です。

私が望むのは、imageTwoの上にimageOneを配置することです。

Twitterbootstrapのレスポンシブ機能がこれら2つの画像でまだ機能している間に、どうすればそれを実現できますか？

以下は私のコードです：（jsfiddle available here ）

<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
16
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;
}
19
Ed T.

プロパティを持つ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>

最初の絶対子は、bodyに対して（50px、100px）、またはcontainerから（0,0）に配置されます。

ただし、2番目の子は、containerを基準として（10px、20px）、またはbodyを基準として（60px、120px）に配置されます（上から50 + 10、100 + 20を加算）左側）。

7
Ozzy

position:relativeでdivに両方をラップしたいと思います

<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