CSS - 谷歌+盒子定位

发布于 2025-01-06 08:38:22 字数 606 浏览 0 评论 0原文

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

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

原文

I added the G+ box to the homepage and notice that when I increase or reduce the browser page size the website content stays on the same place - but the G+ box moves and covers the content. How can I fix the Badge relative to the content and not the browser?

Website Here

The 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葮薆情 2025-01-13 08:38:22

如果您希望将 G+ 框始终保持在同一位置，为什么不为 Flash 和徽标创建一个相对定位的容器，并在内部为 G+ 创建一个绝对定位的容器呢？您的 G+ 框不需要具有动态宽度（闪光灯只是居中但不会改变宽度），因此您在那里没有任何限制。或者我错过了什么？

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

If you want to keep the G+ box always in the same place, why not creating a relative positioned container for the flash and logo and an absolute positioned one inside for the G+? Your G+ box doesn´t need to have dynamic width (the flash is just centered but doesn´t change width) so you have no constrains there. Or am I missing something?

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

回复收藏 0 原文

伴随着你 2025-01-13 08:38:22

一种快速（可能是肮脏的）修复方法是将 right 和 top 或 bottom 指定为百分比。即右：15%和下：-1%——在我看来这看起来还不错。

另一种解决方案可能是只编写一些 JavaScript 代码来修复该问题。
我还没有在您的网站上测试过这段代码

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

。这只是一个一般想法。

One quick (and maybe dirty) fix would be to specify the right and top or maybe bottom as percentages. ie right: 15% and bottom: -1% — that looked decent on my end.

Another solution could be to just write a bit of javascript code to fix the piece.
Something along the lines of

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

I havent tested this code on your site. It's just meant as a general idea.

回复收藏 0 原文

~没有更多了~