帮助将绝对定位的图像 CSS 固定在浏览器的左上角
我是CSS的初学者，我反复尝试将图像（透明png）放置在居中的表格上，但由于某种原因，图形不会从浏览器的左上角移动。绝对定位应该允许我将元素放置在我想要的任何地方。如果有人可以帮助确定我做错了什么，我将非常感激。
------------------------------------ html------------- -----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome to Knock on Wood Productions!<title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
<div id="branch">
</div>
<table width="803" border="0" cellpading="0" cellspacing="0" align="center">
<tr>
<!-- The 1st nested table starts here. -->
<td width="355" height="180" background= "images/grn1.png">
</td>
<td width="10" height="180" background= "images/grn2.png"></td>
<td width="438" height="180" background= "images/grn3.png"></td>
</tr>
</table>
</body>
</head>
--------------------------- --------- CSS ------------------------------------
body { background-color: #fff8a7;
}
#wrapper { position: absolute; width: 803;
margin-left: auto ;
margin-right: auto ;
}
#branch { position: absolute; width: 548;
top: 60;
left: 50;
/* background-image: url(images/gbranch.png); */
z-index: 2;
}
td { border: solid thin red;
I am a beginner to all things css and I've tried repeatedly to position an image(transparent png)over a centered table, but for some reason the graphic won't budge from the upper left corner of the browser. Absolute positioning should allow me to place the element anywhere I want. If someone could help determine what I've done wrong, I'd really appreciate it.
------------------------------------ html------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome to Knock on Wood Productions!<title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
<div id="branch">
</div>
<table width="803" border="0" cellpading="0" cellspacing="0" align="center">
<tr>
<!-- The 1st nested table starts here. -->
<td width="355" height="180" background= "images/grn1.png">
</td>
<td width="10" height="180" background= "images/grn2.png"></td>
<td width="438" height="180" background= "images/grn3.png"></td>
</tr>
</table>
</body>
</head>
------------------------------------ css ------------------------------------
body { background-color: #fff8a7;
}
#wrapper { position: absolute; width: 803;
margin-left: auto ;
margin-right: auto ;
}
#branch { position: absolute; width: 548;
top: 60;
left: 50;
/* background-image: url(images/gbranch.png); */
z-index: 2;
}
td { border: solid thin red;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为父元素（在您的情况下为居中表格）指定“位置：相对”。
Give the parent element (in your case the centered table) a "position: relative".
您为宽度、顶部和左侧属性指定了没有单位的长度。您应该这样写：
#branch { width: 548px; top: 60px; left: 50px; }另外，您可能还想指定该元素的高度。
You specified lengths without units for the width, top and left properties. You should write:
#branch { width: 548px; top: 60px; left: 50px; }Also you might want to specify an height for that element, too.
Fumblr 的权利 - 声明高度至少等于图像的高度。 Fumblr 的代码应该可以工作。
@Fumblr - 我会给你竖起大拇指，但我还没有被允许！
Fumblr's right - declare a height equal to the height of the image at least. Fumblr's code should work.
@Fumblr - I'd give you the thumbs up but I'm not allowed yet!