Question

我在div元素中有两个元素。一个被称为向左浮动而另一个向右浮动。我给了他们负边距，但是当我尝试找到顶部和左边（使用jQuery中的.position()函数）因为我必须在它们上应用一些翻译时，左边元素的左边位置没有正确显示。正确的元素是正确的顶部和左侧。

以下是代码：

HTML

<hmtl>
<head></head>
<body>
    <div class = "rotate">
    <div class = "figure1"></div>
    <div class = "figure2"></div>
    </div>

</body>
</html>

CSS

.rotate{
    width: 300px;
    height: 70px;
    border:2px solid black;
    margin: auto;
}
.figure1{ 
position: relative;    
float: left;
margin-left: -80px;
display: inline-block;    
width: 70px;
 height: 70px;  
 background:url("http://www.northareadevonfootball.co.uk/Images/football.jpg");
 background-size: 100% 100%;          
);
}
.figure2{
position: relative;
float: right;
display: inline-block;
margin-right: -80px;   
width: 70px;
 height: 70px;
  background:url("http://www.northareadevonfootball.co.uk/Images/football.jpg");
 background-size: 100% 100%;      
}

Javascript（jQuery）

var a = $(".figure1").position();
var b = $(".figure2").position();
console.log(a,b);

Demonstration on Jsfiddle

查看课程margin-left的{{1}}和课程figure1的{{1}}，并注意-80px的边距反映在一个但不反映在另一个我们在控制台中看到margin-right的输出。

Answer 1

尝试使用offset()代替position()：

var a = $(".figure1").offset();
var b = $(".figure2").offset();
console.log(a.top + '|' + a.left + ' ' + b.top + '|' + b.left);

Demo

Answer 2

尝试offset()而不是position()

Top和Left不反映给定的负边际

HTML

CSS

Javascript（jQuery）

2 个答案: