Question

我想做的是将键盘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;
}

Answer 1

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

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

更改X和Y，使其高于Q键。

Answer 2

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

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

CSS定位 - 如何修复组件？

2 个答案: