股利下拉菜單覆蓋其他內容

我試圖讓這個當你在一個div單擊圖標，出現一個下拉框，顯示並覆蓋div的內容。但現在，我的下拉框只是推低div的內容，而不是覆蓋它。在瀏覽這個網站上的類似問題之後，我幾乎可以肯定問題在於我的CSS不得不做一些元素的位置：相對和其他元素的位置：絕對的，但我一直在玩它一段時間，似乎無法讓它正常工作。下面是我的代碼的乾淨版本（沒有各種位置嘗試）。股利下拉菜單覆蓋其他內容

相關的CSS代碼：

#ideas_box { 
    display: inline-block; 
    *display: inline; 
    background-color: white; 
    min-width: 1110px; 

    overflow: hidden; 
    margin: 0px 20px 20px 20px; 

    border: solid 1px #6a6a6a; 
    box-shadow: 3px 3px 3px #cecdcd; 
    -moz-box-shadow: 3px 3px 3px #cecdcd; 
    -webkit-box-shadow: 3px 3px 3px #cecdcd; 
} 

#ideas_box_majority_bar_green{ 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 10px; 
    margin-bottom: -1000px; /* for making green bar as large as parent div */ 
    padding-bottom: 1000px; /* for making green bar as large as parent div */ 
    background-color: #a8fba6; 
} 

#ideas_box_main_content { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 100%; 
    margin: 10px 0px 10px 20px; 
} 

#ideas_box_top { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 100%; 
    overflow: hidden; 
} 

#ideas_box_top_image { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 60px; 
} 

#ideas_box_top_titlebar { 
    display: inline-block; 
    *display: inline; 
    float: left; 
} 

#ideas_box_top_titlebar_title { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 100%; 
    padding: 5px 0px 0px 0px; 
    color: #060708; 
    font-family: "Arial"; 
    font-size: 150%; 
} 

#ideas_box_top_titlebar_postInfo { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 100%; 
    color: #363636; 
    font-family: "Arial"; 
    font-style: italic; 
    font-size: 80%; 
} 

#ideas_box_top_iconBar { 
    display: inline-block; 
    *display: inline; 
    float: right; 
    width: 150px; 
    padding-right: 30px; 
} 

#ideas_box_top_iconBar_comment { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 50px; 
    text-align: center; 
    color: #060708; 
    font-family: "Arial"; 
} 

#ideas_box_top_iconBar_thumbsUp { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 50px; 
    text-align: center; 
    color: #060708; 
    font-family: "Arial"; 
} 

#ideas_box_top_iconBar_thumbsDown { 
    display: inline-block; 
    *display: inline; 
    float: left; 
    width: 50px; 
    text-align: center; 
    color: #060708; 
    font-family: "Arial"; 
} 

#ideas_box_content { 
    float: left; 
    overflow: hidden; 
    color: black; 
    font-family: "Arial"; 
    font-size: 100%; 
    margin-right: 40px; 
} 


#comments_dropDown_box_point { 
    display: none; 

    width: 20px; 
    height: 14px; 
    position: relative; 

    left: 13px; 
    top: 3px; 

    background:url('../img/box_point.png'); 

    z-index: 10; 
} 

#comments_dropDown_box { 
    display: none; 

    position: relative; 
    width: 70px; 
    color: black; 
    background-color: white; 
    border: solid 1px #C2C2C2; 
    overflow: auto; 

    left: -13px; 
    top: 2px; 

    z-index: 9; 

    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-top-right-radius:6px; 
    -webkit-border-top-left-radius:6px; 
    -webkit-border-bottom-left-radius:6px; 
    -webkit-border-bottom-right-radius:6px; 

    border: solid 1px #C2C2C2; 
    box-shadow: 3px 3px 3px #cecdcd; 
    -moz-box-shadow: 3px 3px 3px #cecdcd; 
    -webkit-box-shadow: 3px 3px 3px #cecdcd; 
} 

#comments_dropDown_box .comments_dropDown_row { 
    float: left; 
    width: 100%; 
    overflow: auto; 
    text-align: center; 
    padding: 5px 0px 5px 0px; 
    font-style: italic; 
} 

#comments_dropDown_box .dropDown_divider { 
    float: left; 
    width: 100%; 
    height: 2px; 
    background-color: #dfdede; 
}

的HTML代碼是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<html lang="en"> 
<head> 

    <!-- JQUERY --> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="js/scripts_ideaboard.js"></script> 

    <!-- CSS --> 
    <link type="text/css" href="css/ideaboard.css" rel="stylesheet" media="screen"> 

</head> 

<body> 

    <!-- LIST --> 
    <div id="ideas_box"> 
     <div id="ideas_box_majority_bar_green"></div> 
     <div id="ideas_box_main_content"> 
      <div id="ideas_box_top"> 
       <div id="ideas_box_top_image"></div> 
       <div id="ideas_box_top_titlebar"> 
        <div id="ideas_box_top_titlebar_title">Test</div> 
        <div id="ideas_box_top_titlebar_postInfo">Test on Aug 09 2017, 08:37:58pm</div> 
       </div> 
       <div id="ideas_box_top_iconBar"> 
        <div id="ideas_box_top_iconBar_comment"> 
         <img src="img/comments.jpg" style="height: 40px; width: 40px;"><br> 
         +8 
         <!-- display drop down for comments --> 
          <div id="comments_dropDown_box_point"></div> 
          <div id="comments_dropDown_box"> 
           <div class="comments_dropDown_row"> 
            User1 
           </div> 
           <div class="dropDown_divider"></div> 
           <div class="comments_dropDown_row"> 
            User2 
           </div> 
           <div class="dropDown_divider"></div> 
           <div class="comments_dropDown_row"> 
            User3 
           </div> 
          </div> 
         <!-- END display drop down for comments --> 
        </div> 
        <div id="ideas_box_top_iconBar_thumbsUp"> 
         <img src="img/like.jpg" style="height: 40px; width: 40px;"><br> 
         +3 
        </div> 
        <div id="ideas_box_top_iconBar_thumbsDown"> 
         <img src="img/dislike.jpg" style="height: 40px; width: 40px;"><br> 
         -2 
        </div> 
       </div> 
      </div> 
      <div id="ideas_box_content"> 
      This is a test 
      </div> 
     </div> 
    </div> 

    <!-- LIST --> 
    <div id="ideas_box"> 
     <div id="ideas_box_majority_bar_green"></div> 
     <div id="ideas_box_main_content"> 
      <div id="ideas_box_top"> 
       <div id="ideas_box_top_image"></div> 
       <div id="ideas_box_top_titlebar"> 
        <div id="ideas_box_top_titlebar_title">Test</div> 
        <div id="ideas_box_top_titlebar_postInfo">Test on Aug 09 2017, 08:37:58pm</div> 
       </div> 
       <div id="ideas_box_top_iconBar"> 
        <div id="ideas_box_top_iconBar_comment"> 
         <img src="img/comments.jpg" style="height: 40px; width: 40px;"><br> 
         +8 
         <!-- display drop down for comments --> 
          <div id="comments_dropDown_box_point"></div> 
          <div id="comments_dropDown_box"> 
           <div class="comments_dropDown_row"> 
            User1 
           </div> 
           <div class="dropDown_divider"></div> 
           <div class="comments_dropDown_row"> 
            User2 
           </div> 
           <div class="dropDown_divider"></div> 
           <div class="comments_dropDown_row"> 
            User3 
           </div> 
          </div> 
         <!-- END display drop down for comments --> 
        </div> 
        <div id="ideas_box_top_iconBar_thumbsUp"> 
         <img src="img/like.jpg" style="height: 40px; width: 40px;"><br> 
         +3 
        </div> 
        <div id="ideas_box_top_iconBar_thumbsDown"> 
         <img src="img/dislike.jpg" style="height: 40px; width: 40px;"><br> 
         -2 
        </div> 
       </div> 
      </div> 
      <div id="ideas_box_content"> 
      This is a test 
      </div> 
     </div> 
    </div> 

</body>

的JS代碼：

$(document).ready(function() { 

    $("#ideas_box_top_iconBar_comment").click(function() 
    { 
     $("#comments_dropDown_box").toggle(); 
     $("#comments_dropDown_box_point").toggle(); 
    }); 


});

真人版是在這裏：http://quickid.net/test/ideaboard.html（點擊評論圖標在第一篇文章中）

任何幫助將非常感激。

來源

2017-09-03 icydash

你是絕對正確的，問題有事情做與位置：相對和位置：絕對的。但目前，它看起來像你利用溢出：隱藏在你的一些父元素（#ideas_box和#ideas_box_top_iconBar）上。你將需要重新格式化你的CSS一點，以便使它不需要溢出：隱藏。否則，你將無法讓你的「工具提示」divs「溢出」出div。他們只會被隱藏。 –

此外 - 重要的是要注意，您只需要每頁一個「ID」。目前，它看起來像你會經常重複'ideas_box'。 –

非常感謝您的幫助，完美工作！當然是 – icydash

正如我在評論中提及了 - 你就必須做更多的與您的代碼的其餘部分重新格式化得到這個工作正是你想要的，但我有一段時間了，所以我想我會告訴你如何製作整個position: relative和position: absolute。

首先，我將所有ID都更改爲類，並在您的父元素上刪除了您的overflow: hidden - 使用此活動時，將無法讓您的「工具提示」彈出您的div。當然，這會破壞你的綠線如何工作，但它可以讓我們獲得工具提示的工作。

之後，我將position: relative添加到您的.ideas_box_top_iconBar_comment，因爲這將是父類工具提示箭頭的類。

我再包的提示箭頭&菜單中.comments_dropDown_boxWrapper並具有以下的css：

.comments_dropDown_boxWrapper { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    display: none; 
}

然後後的JavaScript的一些變化與新的包裝類的工作，我們把它的工作！

這裏是jsfiddle，所以你可以看到它所有的行動。這不是你正在做的一步一步的解決方案，但我希望它能夠幫助你自己解決問題。

的jsfiddle： https://jsfiddle.net/yt8Ltu31/

來源

2017-09-03 23:02:13

將其設爲position: absolute然後做z-index: 1

來源

2017-09-03 23:34:24 slikk

股利下拉菜單覆蓋其他內容

回答

相關問題