css - 相对于中心定位页面元素

Question

相对于同一页面上另一个元素的位置，我应该如何将元素绝对放置在页面上？我已经使用 css“position:center;”将 jpg 居中，现在我想使我放置在 jpg 和整个页面周围的元素偏离中心一定数量的像素，相对于那个 jpg。

Answer 1

位置:居中；不是有效代码，使用 margin: 0 auto;

您必须将背景图像设置为 position: relative;以及该背景图像的所有其他内容。参见 fiddle 。

    .my-image {
    margin: 0 auto;
    position: relative;
    width: 256px;
    height: 256px;
    background-image: url('http://ocmapdb.wdfiles.com/local--files/mapper:shadowsand/White%20Tiger%20Head.jpg');
    background-repeat: no-repeat;
    }

这是背景图像的图像位置。

  .image-two {
  position: absolute;
  top: 100px;
  left: 50px;
  }

HTML

<div class="my-image">
    <img class="image-two" src="http://www.iconshock.com/img_jpg/SUPERVISTA/animals/jpg/256/tiger_icon.jpg">
</div>

see example