Question

我创建了一个代码来在图像上显示图像。继承人代码：

<style type="text/css"> 
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">

现在我在帖子中将此添加到我的博客网站。图像似乎与屏幕一起定位。这些图像一个接一个地出现，但即使添加了我想让它们出现的代码，它们也位于屏幕的最左侧。我想让它们出现在我帖子中的一些文本下面。我认为位置标签的“绝对”值存在一些问题。但我不知道如何克服这一点。我是新手。

Answer 1

将它们嵌套在relative元素中：

<style type="text/css"> 
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>

http://jsfiddle.net/nUPsh/1/

本文很好地解释了CSS position属性：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

使用一个图像作为跨度的背景可以使其响应。因为它不依赖于首先对容器盒进行成像。

.rel-parent {
  background: blue;
  margin: 0px;
  position: relative;
  height: 100%;
  min-height: 500px;
  width: 250px;
}

.notification {
  background: red;
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  right: -10px;
}

.green-wrapper {
  background: green;
  padding: 40px;
  height: 100%;
  width: 290px;

  overflow-y: auto;
  overflow-x: visible;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* reset */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

使用CSS在图像上显示图像：位置标记查询

2 个答案: