Question

我在主页上添加了G +框，并注意到当我增加或减少浏览器页面大小时，网站内容保持在同一个位置 - 但G +框会移动并覆盖内容。如何修复相对于内容而不是浏览器的徽章？

网站Here

CSS：

html {
height:100%;
}

body {
background:#000;
margin: 0;
padding: 0;
height:100%!important;
min-height:750px;
min-width:980px;
}

object, embed {
vertical-align:top; min-height:750px; outline:none; margin: 0; padding: 0;
}

div {
height: 100%;
}

img {
border:none; vertical-align:top
}

.aligncenter {
text-align:center;
}

.google {
right: 150px;
top: 600px;
position: fixed;
height: 60px;
border: 0;
}

Answer 1

一个快速（也可能是脏）修复方法是将right和top或bottom指定为百分比。即right: 15%和bottom: -1% - 在我看来这看起来不错。

另一个解决方案可能就是写一些javascript代码来修复这个部分。

的内容

var windowHeight = $(window).height();
var gHeight = $('.google').height();
var offset = parseInt(windowHeight) - parseInt(gHeight);
$('.google').css('top',offset);

我没有在您的网站上测试此代码。这只是一个普遍的想法。

Answer 2

如果你想让G +盒子始终保持在同一个地方，为什么不为闪光灯和徽标创建一个相对定位的容器，为G +创建一个绝对定位的容器？你的G +盒子不需要有动态宽度（闪光灯只是居中但不改变宽度）所以你没有约束。或者我错过了什么？

.container {
position:relative;
}
.google {
position:absolute;
left: 600px;
top: 600px;
height: 60px;
border: 0;
}

CSS - Google+ Box定位

2 个答案: