21

我正在研究 CSS 设计模板。

我有两个图像imageOne和imageTwo.

两者都是position: relative因为如果我设置其中之一，position: absolute那么它就不再保持响应速度，而响应能力是这里的关键。

我想要的是imageTwo放在imageOne.

当 twitterbootstrap 的响应功能仍然适用于这两个图像时，我该如何实现呢？

下面是我的代码：（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

24

我为这些图像添加了一个包装器 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;
}
于 2013-08-14T15:23:36.210 回答
8

当您在 acontainer中有具有属性的元素时：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或container.

但是第二个孩子将被定位在 (10px, 20px) 相对于container，或 (60px, 120px) 相对于body（从顶部添加 50+10，从左侧添加 100+20）。

于 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 回答
2

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

.imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}
于 2013-08-14T15:26:25.823 回答
1 
.imageTwo {
    z-index: 1;
    margin-top: -100px;
}
于 2013-08-14T15:24:13.283 回答
0

更改position: relative;为position: absolute;

小提琴

如果您仍然想要一个相对位置，请将 absolute 包装在另一个div.

于 2013-08-14T15:24:28.707 回答