CSS 定位 - 如何将组件固定到位？
示例 - http://appdist.me
我想做的是将键盘 SVG 固定到底部屏幕并占据屏幕高度的一半，无论窗口大小如何调整，Facebook 徽标始终覆盖“Q”键。
我已经尝试这样做好几天了。我做错了什么？谢谢。
这是我的 HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>CSS Layout Problem</title>
</head>
<body>
<div id="svg">
<embed src="keyboard-gray.svg" id="keyboard"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="fb.svg" id="facebook"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="frame.svg" id="frame"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</div>
</body>
这是我的 CSS：
body{
background-color: #333;
}
#svg{
}
#facebook{
position: fixed;
width: 6%;
height: 6%;
}
#frame{
position: fixed;
width: 100%;
height: 47%;
top: 2%;
left: 0;
}
#keyboard{
position: fixed;
width: 100%;
height: 50%;
bottom: 2%;
left: 0;
}
Example - http://appdist.me
What I'd like to do is have the keyboard SVG fixed to the bottom of the screen and take up half the screen height, with the Facebook logo always overlaying the 'Q' key, no matter how the window is resized.
I've been trying to do this for days. What am I doing wrong? Thanks.
Here's my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>CSS Layout Problem</title>
</head>
<body>
<div id="svg">
<embed src="keyboard-gray.svg" id="keyboard"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="fb.svg" id="facebook"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="frame.svg" id="frame"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</div>
</body>
Here is my CSS:
body{
background-color: #333;
}
#svg{
}
#facebook{
position: fixed;
width: 6%;
height: 6%;
}
#frame{
position: fixed;
width: 100%;
height: 47%;
top: 2%;
left: 0;
}
#keyboard{
position: fixed;
width: 100%;
height: 50%;
bottom: 2%;
left: 0;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果要合并图像并使 SVG 具有交互性，则可以在 xml 中使用
标签（而不是祝你好运 - 看起来你有一个有趣的项目可以玩。
If you want to merge the images and make the SVG interactive, then you can use
<a>tags in your xml (instead of<g>). Check out this IBM link for some ideas on how to achieve different types of interactivity.Good luck - it looks like you have a fun project to play with.
将
#facebook也绝对定位并设置 z-index，使其显示在键盘上方。更改
X和Y使其位于 Q 键上方。Position the
#facebookabsolutely too and set the z-index so that it shows above the keyboard.Change
XandYso that it's above the Q key.