Question

在我的一个页面上，我使用了jquery来设置导航按钮的动画，但是，当我这样做的时候它会将它下方的div推开并弄乱布局 - 是否可以允许用于动画并与div交叉而不移动或影响其布局的按钮？

http://www.omnicraftservers.com/images/problem.png

我对网页设计一般都很陌生，所以我可能会在这里犯一些大错 - 请指出来！

list元素的jquery：

<script> 
$(document).ready(function()
{
  $("ul li").mouseenter(function()
  {
    $(this).animate({height:'100px',opacity:'1'},200);
  });
  $("ul li").mouseleave(function()
  {
    $(this).animate({height:'110px',opacity:'0.9'},100);
    $(this).animate({height:'30px',opacity:'0.9'},200);
  });
});
</script>

list元素的css：

ul li
{
clear:right;
position:relative;
float:left;
width:100px;
height:auto;
display:inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-      stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.4)));
border:1px solid rgba(0, 0, 0, 0.5);
border-bottom-left-radius:11px;
border-bottom-right-radius:11px;

text-align:center;
text-shadow: 1px 1px rgba(0,0,0,0.9);
font-family: 'Abril Fatface', cursive;
font-size: 20px;

z-index:20;

}

并且，如果这有帮助，有问题的外部div元素的css：

.panel
{
position:relative;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,0.7)), color-stop(100%,rgba(0,0,0,0.8)));
border:1px solid rgba(0, 0, 0, 0.5);
width:1148px;
height:185px;
border-radius:11px;
padding:10px;
z-index:0;
}

希望这是一个可行答案的足够信息 - 真的很感激任何帮助！

Answer 1

您需要将'header nav element'置于绝对位置。这不会影响文档中任何其他元素的位置。

允许使用jquery重叠元素

1 个答案: