Question

基本上我正在制作一个导航栏，由于Jquery做了很多调整大小以使网站看起来“漂亮”我不想使用水平列表，所以每个按钮都是这样创建的：

<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>

（是的，他们都是有充分理由的图像按钮）

但唯一的问题是它们是固定的并且在页面顶部设置为“前0”并且因此不能彼此相邻而是相互重叠，任何关于我如何能保持位置的想法固定，他们顶部为0，但他们彼此相邻？

HTML

<div id="top">
<a href="#" class="button" id="home"><img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span></a>
</div>

CSS

#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }

初始化函数（在$（document）.ready（）上运行）

$('a.button').animate({
    height: '+=5px',
    }, 20, function() {
$('a.button').animate({
    opacity: 0.6,
    height: '-=5px',
}, 20);
});

由于

Answer 1

将它们全部放在容器中，即id="header"，标题为position:fixed;top:0;etc...

然后，为每个链接/按钮提供：

position:relative;display:inline-block;float:left;

如果您希望它们居中，则在#header使用text-align:center;并从链接中删除float:left

因此容器将被修复，但内部的按钮将是相对的而不是重叠。

希望这有帮助！

非常粗略的例子

http://jsfiddle.net/6SCTZ/

<div id="header">
   <div class="button">button1</div>
   <div class="button">button2</div>
   <div class="button">button3</div>
</div>

CSS：

#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }

.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}

Answer 2

只需在容器元素中放置需要修复的元素（在这种情况下，我将使用ID为“top_fixed”的div）。

考虑以下html：

<div id='top_fixed'>
  <a href='http://google.com'>Google</a>
  <a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>

现在，以下CSS：

a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}

DEMO：http://jsfiddle.net/mHKNc/1/

CSS固定位置相互重叠

2 个答案: