Question

我试图将我的小Facebook徽标图标移动到页面的左上角，但目前显示的是1/4向下。如果我做错了什么，请你看看我的CSS代码。

CSS;

html,body {
background-image:url(../img/background.png);
background-size:cover;
}

 #social  {
margin-top:20px;
margin-left:50px;
height:100px;
width:200px;
position:absolute;
z-index:2;

}

#bar {  
margin-top:55px;
min-width:1000px center;
max-width:1920px;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo { 
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}

#social  {
margin-left:50px;
height:100px;
width:200px;
position:absolute;
z-index:2;

}

.facebook {
background-image:url(../img/64_x_64px/facebook_dark.png);
height:32px;
width:32px;
background-size:32px;
}

我的HTML是：

</head>
<body>
<div id="social">
<div class="facebook"></div>
</div>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>

谢谢你的帮助

Answer 1

你宣布#social两次

尝试设置顶部和左侧的绝对位置（或将它们重置为0px并执行保证金）

#social  {
    top:       20px;
    left:      50px;
    height:   100px;
    width:    200px;
    position: absolute;
    z-index:  2;
}

Answer 2

几个问题：

您将#social定义为position: absolute，然后使用margin-*属性进行定位，这不应该起作用，因为它已从文档流中取出。
您已为ID social定义了两次CSS，在这种情况下遇到的最后一个定义优先

我的建议是使用left和top属性而不是margin-left和margin-top，并删除最顶层的#social样式定义。

Answer 3

.facebook {
background-image:url(../img/64_x_64px/facebook_dark.png);
height:32px;
width:32px;
background-size:32px;
position:absolute;
top:0;
right:0;
}

请使用top，left，right和bottom，这些内容适用于使用positions的地方。使用margin-left等定位不会使你的代码语法化。

Answer 4

您的margin-top:20px; ID中有#social个属性。这意味着什么？

注意：您宣布了两个#social个ID，请删除其中一个ID，以免彼此冲突。

尝试设置

.facebook {
    background-image:url(../img/64_x_64px/facebook_dark.png) top left;
    height:32px;
    width:32px;
    background-size:32px;
}

建议：如果您的背景大小始终为32x32，我建议您使用32x32图像而不是64x64，如URL所示。

在CSS页面上移动图像

4 个答案: