Css 响应式设计中的元素重叠

我正在进行的设计（除了桌面版）一直在考虑480px 720px的分辨率，但它应该在较小的设备上显示ok。我对上面的元素有很多问题，它们都是重叠的

我现在主要关心的是重叠的元素，我知道我可能需要使用媒体查询来调整一些其他内容，但我不想继续，直到我解决了这个问题：

• 正确定位菜单（当它移动并最终消失时）
• 显示完整的蒙版图像
• 防止按钮（图像）重叠
• 防止文本离开div

因为我相信我的css上有一个非常混乱的混合/缺少位置和显示元素

相关代码：

@media only screen and (max-width: 500px) {
/*for the menu*/
.site-header {
display: block !important;
}
.sidebar-toggle { //the menu bar-icon properly
right: 390px !important; // I needed to do this because it was originally on the right side (im working on the Magnus theme in wordpress)
display: table;
position: absolute;
float:left;
}

/*for showing the masked image*/
.content-area {  //the div that contains the "A" masking the image
overflow: hidden; //without this scroll appears
}
h1.masking-a {
display: block;
position: relative;
}

/*for the text and image buttons*/
.square-footer { //the container div
position: fixed;
}
.square-footer-text {
position: fixed;
}
.square-footer-text p {
position: relative;
text-align: center !important;
}
.square-footer img {
position: fixed;
}
}

---

你能分享一些HTML吗？如果您可以提供一个JSFIDLE或一些实时代码来重现您的问题，那就更好了。这将有助于加快故障排除过程。在没有看到任何其他内容的情况下，您的CSS看起来确实有一些令人困惑的规则，例如在同一元素上设置

绝对位置

和

向左浮动

。您也可以共享一些HTML吗？如果您可以提供一个JSFIDLE或一些实时代码来重现您的问题，那就更好了。这将有助于加快故障排除过程。在没有看到任何其他内容的情况下，您的CSS看起来确实有一些令人困惑的规则，例如在同一元素上设置

绝对位置

和

向左浮动

。