21

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

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

どちらもposition: relative、そのうちの 1 つを設定するposition: absoluteと、応答性が低下し、ここで応答性が重要になるためです。

私が欲しいのは、imageTwo上に置くことですimageOne。

twitterbootstrap のレスポンシブ機能がこれらの 2 つの画像で引き続き機能している間に、どうすればそれを達成できますか?

以下は私のコードです：（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;
}
4

7 に答える 7

8

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>

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

ただし、2 番目の子は に対して (10px, 20px) 、または (上から 50+10、左から 100+20 を追加container) に対して (60px, 120px) に配置されます。body

于 2013-08-14T15:40:17.333 に答える
4

コンテナーにレスポンシブ イメージがあり、そのイメージの上に別のイメージを配置する場合:

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>

于 2015-04-09T10:04:39.053 に答える
3

両方を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;
}
于 2013-08-14T15:26:47.743 に答える