在不移動其他元素的情況下放置HTML/CSS

我試圖在菜單的右側放置一個實時聊天按鈕，而不必移動菜單..如果我把它放在菜單內，那麼菜單會嘗試使用它作爲一個項目，如果我把它放在上面它將向下移動菜單，如果我把它放在下面，它將不會正確對齊，即使我使用填充。在不移動其他元素的情況下放置HTML/CSS

誰能告訴我如何圍繞一個頁面上的元素自由移動，而不會影響周圍其他元素（即移動它們）

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

來源

2012-07-12 user1519929

你可以給你的代碼片段？ – 2012-07-12 07:03:06

我應該知道的頁面的CSS來回答 – 2012-07-12 07:04:17

這裏是導航菜單的CSS; – user1519929 2012-07-12 07:05:13

嘿，現在你可以使用位置像這

你的主菜單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>

來源

2012-07-12 07:04:39

注意：我已經嘗試了絕對位置，當我調整瀏覽器的大小時，元素不會保留在原位，而是將頁面寬度增加1000px，並且必須滾動到空白/灰色區域以查看元素。 – user1519929 2012-07-12 07:07:07

你可以顯示你的HTML和CSS代碼當你申請聊天分區 – 2012-07-12 07:10:41

http://pastebin.com/cVWewHEG – user1519929 2012-07-12 07:23:22

通過就可以實現它特定元素的使用position:absolute。

實施例：

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

來源

2012-07-12 07:04:41

如果不知道確切的代碼我認爲像有人將工作：

設置在外容器的相對位置。現在你可以插入一個帶有絕對Button的物品，而不用移動它們。

來源

2012-07-12 07:05:00 Johni

您可以增加該元素的z-index，並且這樣它將會高於頁面中的其他圖層，並且可以在其他元素上自由移動。

來源

2012-07-12 07:06:54 Alex

您可以嘗試將它放在菜單上方，然後在菜單上使用負邊距。

來源

2012-07-12 07:29:40

在不移動其他元素的情況下放置HTML/CSS

回答

相關問題