CSS 定位 - 如何将组件固定到位？答案

【问题标题】：CSS Positioning - How can you fix components in place?CSS 定位 - 如何将组件固定到位？
【发布时间】：2011-08-12 17:15:21
【问题描述】：

示例 - 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;
}

【问题讨论】：

只是出于兴趣，为什么不将 facebook 徽标作为图像的一部分呢？是不是变成按钮了？
是的，就是这样。我的计划是制作一个链接键盘。
哈哈，如果我可以让它按照我想要的方式工作的话。
我可以合并 SVG 并将路径之间的链接放在 XML 中，但我不知道该怎么做。
好的 - 我在下面添加了一个答案，该答案链接到 IBM 页面，应该可以帮助您。玩得开心！

标签： html css layout positioning

【解决方案1】：

如果您想合并图像并使 SVG 具有交互性，那么您可以在 xml 中使用 <a> 标签（而不是 <g>）。查看this IBM link，了解有关如何实现不同类型交互性的一些想法。

祝你好运 - 看起来你有一个有趣的项目可以玩。

【讨论】：

使用 Illustrator 手动合并 SVG，并按照建议使用标签使 SVG 具有交互性。谢谢！ :D +1
没问题，很高兴它成功了。如果您有时间完成，请在此处发表评论 - 我想检查一下。
似乎工作正常，但在跨浏览器支持方面存在问题。
您的 SVG 在所有浏览器中都可以正常显示，因此看起来您的 CSS 可能过于复杂。在 StackOverflow 上打开一个新问题或从头开始你的 CSS，看看是什么导致它在 IE7 和 8 中崩溃
我确实提出了另一个问题并得到了解决。再次感谢。

【解决方案2】：

绝对定位 #facebook 并设置 z-index 使其显示在键盘上方。

#facebook{
  position: absolute;
  height: 12%;
  bottom: Y%;
  right: X%;
  z-index: 99;
}

更改 X 和 Y 使其位于 Q 键上方。

【讨论】：

缩放窗口时似乎没有停留在 Q 键上方。
尝试使用百分比值而不是像素值。
right: X% 的百分比似乎不会影响 Facebook 徽标的位置。不过可能会有所进展。