CSS固定位置互相重叠 [英] CSS Fixed Position overlapping each other

问题描述

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

 < a href =＃class =buttonid =home>< img src =homeicon.png >< span id =homex>< br />< img src =home.png/>< / span>< / a> 
  

（是的，他们都是图像按钮的理由很好）

但是唯一的问题是它们是固定的，并在页面的顶部设置为top 0，因此不能坐在彼此，但重叠，任何想法，如何我仍然可以

<$ p





$ b $ p> < div id =top>
< a href =＃class =buttonid =home>< img src =homeicon.png>< span id =homex >< 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;颜色：黑色; border-radius：0px 0px 25px 25px; } 
 #top {position：relative; top：0; padding-left：25px; } 
  

Init函数（在$（document）.ready（）上运行）

  $（'a.button'）。animate（{
 height：'+ = 5px'，
} function（）{
 $（'a.button'）。animate（{
 opacity：0.6，
 height：' -  = 5px'，
}，20）; 
}）; 
  

感谢

解决方案

将它们全部放在一个容器中，即 id =header，给出标题 position：fixed; top：0; ...

然后，对于每个链接/按钮给他们：

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

然后在 #header 中使用 text-align：center; 并删除 float：left

所以容器会被修复，但是里面的按钮是相对的，不会重叠。

希望这有帮助！

$ b

非常粗糙的例子

> http://jsfiddle.net/6SCTZ/

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

CSS：

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

Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:

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

(yes they're all image buttons for good reason)

but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?

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

Init function (runs on $(document).ready())

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

Thanks

解决方案

Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...

Then, for each of the link/buttons give them:

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

if you want them centered, then in the #header use text-align:center; and remove float:left from the links

So the container will be fixed, but the buttons inside will be relative and not overlap.

hope this helps!

very crude example

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

这篇关于CSS固定位置互相重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！