Question

我一直在寻找我的问题的答案，但我主要找到一个看似相似但仍然不同的问题的答案。

我有一张图片，我试图放置其他几个较小的图像。我把较大的图像放在一个这样的位置，以便我可以在我的小图像上使用“位置：继承”，这很有效：我的图像完全放在他们的背景上。

我的问题是，为了工作，这需要将我的大图像设置为“position：absolute”。因此，我无法将整个装置移动到页面上的任何位置，而是将其当前所在的左上角移动。

HTML文件：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Map">

<img id="X0001Y0001" src="blue_brick.png">

</div>
</body>
</html>

CSS文件：

#Map {
background-image:url('CoreMini.png');
height:128px;
width:256px;
position:absolute;
}

#X0001Y0001{position:inherit;top:0px; left:9px}

Answer 1

将您的#Map div包裹在父div中，并为父div提供以下内容：

#parent {
  position: relative;
  margin: 0 auto;
  width: 256px;
}

请参阅DEMO。

Answer 2

由于您的#Map为absolute，因此您需要使用left和top来定位图片。这将有助于您定位图像

如何在CSS中居中绝对定位的项目

2 个答案: