右侧栏与浏览器调整大小重叠内容页面

Question

我需要帮助修复我在Wordpress中的右侧边栏，以便在屏幕上以不同的分辨率尺寸看时它不会移动？

右侧边栏的CSS

#socialsidebar { 
   float: right; 
   position: relative; 
   overflow: hidden; 
   margin-right: 200px; 
   margin-top: 200px; 
   height: auto; 
   width: 194px; 
}

容器/页面的CSS

body { 
   min-width: 960px; 
}
.container_12 { 
   background: #fdfdfd; 
   margin-left: auto; 
   margin-right: auto; 
   width: 960px; 
}

Answer 1

您需要了解CSS的position属性。

您需要处理的拇指规则很少。

1. 避免不必要的水平滚动。
2. 尽量不要给出静态高度，因为你总是拥有无限的高度。使用height:auto作为更大的容器。
3. 为这些容器提供静态尺寸，您知道这些容器可以容纳在大多数分辨率上。
4. 避免内联css - 尝试尽可能多地定义通用css。
5. 决定应用使用的可能分辨率范围。然后开始编写CSS。
6. 最重要的是，总是在IE上交叉验证您的CSS（当您编写它时）（最大的挑战）。

大部分时间，最好的方法是它应该简单易于修改。

看你需要将整个屏幕视为一个坐标系统，其原点位于左上角，Y轴向下。

this是关于CSS-Position属性的最佳文章之一。通过它。它将帮助您了解左，右，上，下工作的方式。

现在，我制作了一个超级简单的样本，满足您的需求。即右导航，它在任何分辨率下都保持稳定。

Sample-fiddle

在此示例中您应注意的是，宽度，高度，顶部，左侧的百分比的广泛使用。和位置属性。

你可以相应地修改它。或者从中获取参考。还有一件事，你不需要做position:absolute，我这样做是因为我想通过它的top，left，right bottom属性为容器提供维度，你可以通过百分比和{{{ 1}}。