Question

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

任何人都可以告诉我如何自由地移动页面上的元素而不影响其周围的其他元素（即移动它们）

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

Answer 1

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

示例：

 .chat{
     position:absolute;
     right: 0px;
     z-index: 9999;
     width: xyz;
     height: xyz;
  }

Answer 2

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

你的主菜单div id给位置相对

并像这样给予聊天ID位置绝对

<强> 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>

Answer 3

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

将外部容器设置为相对位置。现在，您可以插入一个带有绝对按钮的项目，而不会移动所有其他项目。

Answer 4

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

Answer 5

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

放置HTML / CSS而不移动其他元素

5 个答案: