1

我试图在菜单右侧放置一个实时聊天按钮而不移动菜单。如果我把它放在菜单内，那么菜单将尝试将它用作一个项目，如果我把它放在上面它会将菜单向下移动，如果我把它放在下面，即使我使用填充它也不会正确对齐。

谁能告诉我如何在页面上自由移动元素而不影响它周围的其他元素（即移动它们）

CSS

/*===== header =====*/ 
#header .row-1 { height:110px; background:#0d0d0d; } 
#header .row-1 .logo { position:relative; margin-right: 55px; padding:0px 0 0 0; float:left; } 
#header .nav { float:right; } 
#header .nav li { } 
#header .nav li a { color:#727171; text-decoration:none; } 
#header .nav li a:hover, 
#header .nav li a.current { color:#fff; }
4

5 回答 5

5

通过position:absolute在特定元素上使用，您可以实现它。

例子：

 .chat{
     position:absolute;
     right: 0px;
     z-index: 9999;
     width: xyz;
     height: xyz;
  }
于 2012-07-12T07:04:41.783 回答
1

您可以增加该元素的 z-index，这样它将位于页面中的其他图层之上，并且能够在其他元素上自由移动。

于 2012-07-12T07:06:54.693 回答
1

嘿，现在你可以习惯这样的定位了

您的主菜单 div id 赋予相对位置

并像这样给聊天 id position absolute

css

    .nav{
    position:relative;
    }


.chat{
position:absolute;
right:-20px;
z-index:999;
width:xxx;
height:xxx;
}

HTML

<div class="nav">

<div class="chat">
// your chat code here 
</div>
</div>
于 2012-07-12T07:04:39.830 回答
1

在不知道确切代码的情况下，我认为这样的人会起作用：

将外部容器设置为相对位置。现在，您可以在其中插入一个带有绝对按钮的项目，该项目将覆盖所有其他项目，而无需移动它们。

于 2012-07-12T07:05:00.373 回答
0

您可以尝试将其放在菜单上方，然后在菜单上使用负边距。

于 2012-07-12T07:29:40.520 回答