Question

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

Answer 1

位置：中心;是无效的代码，使用margin：0 auto;

您必须将背景图像设置为position：relative;和其他一切绝对的背景图像。见小提琴。

    .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

Answer 2

要获取元素的位置并将另一个元素设置到其位置，请使用JS;像这样的东西：

<强> JS

在以下JS中，img是你希望从

获得位置的“东西”

使用$（“elem”），其中elem是DOM对象
使用$（“。myClass”），其中.myClass是您所对象的类试图访问。
使用$（“＃myId”），其中#myId是您尝试访问的DOM对象的ID。注意：Id的必须是唯一的。如果HTML代码中出现多次相同的ID，则您的HTML无效

如果您想要获得多个项目的位置，可以使用以下方式获取其位置的循环（适用于类或多个DOM对象：

var numItems = $(".myClass").length;
for(i = 0; i < numItems; i++) {
    var myImageTop = $(".something:eq("+i+")").offset().top;
    var myImageLeft = $(".something:eq("+i+")").offset().left;
    var myImageWidth = $(".something:eq("+i+")").outerWidth();
    var myImageHeight = $(".something:eq("+i+")").outerHeight();

    //Then the elements you want to change the position of. You can access specific elements the same way we access specific elements above (using `:eq()`)
}

如果您不需要循环（只有一个要定位的元素）

，请使用以下内容

var myImageTop = $("img").offset().top;
var myImageLeft = $("img").offset().left;
var myImageWidth = $("img").outerWidth();
var myImageHeight = $("img").outerHeight();

$(".something").css({
    top: myImageTop + "px",
    left: myImageLeft + "px" //, //Uncomment the comma if you uncomment one of the following lines
    //width: myImageWidth + "px" //, //Uncomment this line if you want this element to match the original image's width, uncomment the comma if you uncomment the next line
    //height: myImageHeight + "px" //Uncomment this line if you want this element to match the original image's height
});

如果您想在图片右侧放置一个元素，只需添加myImageLeft和myImageWidth变量，如果您想在其下放置一个元素，请添加myImageTop和myImageHeight个变量。

如果你想把它们放在上面，你可以得到元素的高度并从myImageTop中减去它，类似地，如果你想把图像放在左边，你可以得到元素的宽度并从中减去它myImageLeft

注意：您想要设置位置的元素（不是您获得位置的元素 - 尽管它们可以position:相对，绝对或固定）应该{ {1}}

正如Guilherme所说，position:fixed;不存在，所以请避免将其用于定位元素。 http://www.w3schools.com/css/css_positioning.asp显示定位属性。 Here是Guilherme提供的链接。

如果要将项目置于父项中心，可以在元素上使用position:center;（假设父元素具有margin-left:auto; margin-right:auto;或设置宽度）。如果您尝试居中的是文字，只要DOM对象（即position:relative;，text-align:center;，<p></p> [仅举几例]，您就可以使用<span></span>有一个设定的宽度。当我说设置宽度时，可以通过多种方式完成此操作，查看this以获取更多详细信息。

将页面元素定位到中心

2 个答案: