如何將div下拉放置在其他div的後面，以便覆蓋下拉邊框的一部分？

我正在爲頭像建立一個簡單的下拉菜單。我遇到的問題是我想要下拉菜單覆蓋角色邊框的一部分，因此看起來更加無縫。這是我的意思。如何將div下拉放置在其他div的後面，以便覆蓋下拉邊框的一部分？

以前

Before

後

enter image description here

我可能建於我的HTML/CSS錯誤，但我嘗試添加的z索引，但它永遠不會改變任何東西。我基本上是想讓下拉菜單進入頭像按鈕的後面，並將頭像的底部邊框設置爲無，因此看起來無縫。

任何想法，我可以做不同？

HTML

<div class="user"> 
    <div class="avatar"> 
     <img src="<?php echo base_url(); ?>assets/img/avatars/don.jpg" class="image"> 
     <img src="<?php echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow"> 
     <div class="dropdown"> 
      <div class="wrap"> 
       <p>Test</p> 
      </div> 
     </div> 
    </div> 
</div>

CSS

header .user { position:relative; width:37%; padding:0 10px 0 0; height:100%; float:left; text-align:right; } 
header .avatar { position:relative; display:inline-block; width:70px; height:50px; margin:19px 0 0 0; text-align:left; vertical-align:middle; border:1px solid transparent; } 
header .avatar img.image { vertical-align:-30px; margin:0 5px 0 10px; } 
header .avatar img.arrow { vertical-align:-18px; } 
header .avatar:hover { background:#fff; border:1px solid #dcdcdc; border-bottom:none; } 
header .avatar:hover .dropdown { display:block; } 
header .avatar .dropdown { position:absolute; top:50px; left:-231px; display:none; width:300px; height:200px; background:#fff; border:1px solid #dcdcdc; } 
header .avatar .dropdown .wrap { padding:20px; } 
header .avatar .dropdown p { margin:0; }

來源

2011-12-02 dallen

嘗試border-bottom-style:none;上的下拉列表中的「阿凡達」和border-top-style:none;，或只是一個負margin-top。

來源

2011-12-04 01:42:27 SemicolonExpected

的HTML應該是這樣的：

<div class="user"> 
    <div class="avatar"> 
     <img src="<?php echo base_url(); ?>assets/img/avatars/don.jpg" class="image"> 
     <img src="<?php echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow"> 
    </div> 
    <div class="dropdown"> 
     <div class="wrap"> 
      <p>Test</p> 
     </div> 
    </div> 
</div>

CSS

.avatar{ border-bottom: 0; z-index: 10:} 
.dropdown{z-index:9}

和固定:)內「下拉菜單」，並使用負margin-top

來源

2011-12-02 21:50:51

這樣的作品，除了現在當我將鼠標懸停在該頭像，在下拉就不會出現。我的CSS讓下拉菜單出現是這一行，但不知道如何修復它：header .avatar：hover .dropdown {display：block;} – dallen

好的，我通過這樣做來修復：header .avatar：hover + div.dropdown { display：block;}但是現在，當我將光標從頭像區域移動到下拉列表中時，頭像的懸停效果消失了，我該如何讓它保持原樣呢？ – dallen

我認爲打開下拉列表的正確方法是點擊，而不是懸停，但無論如何。使用d顯示下拉菜單iv.user：懸停，並應該修復它 –

PUT 「阿凡達」。

來源

2011-12-02 21:51:17

不適用於我。不給我我想要的結果。下拉部分仍然在頭像部分之上。我需要它去。下面的答案有用，有點。 – dallen

如何將div下拉放置在其他div的後面，以便覆蓋下拉邊框的一部分？

回答

相關問題