1. 首页
  2. 问答
  3. 股利下拉菜单覆盖其他内容

股利下拉菜单覆盖其他内容

2017-09-03 126 views
1

我试图让这个当你在一个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

+0

你是绝对正确的，问题有事情做与位置：相对和位置：绝对的。 但目前，它看起来像你利用溢出：隐藏在你的一些父元素（#ideas_box和#ideas_box_top_iconBar）上。你将需要重新格式化你的CSS一点，以便使它不需要溢出：隐藏。否则，你将无法让你的“工具提示”divs“溢出”出div。他们只会被隐藏。 –

+0

此外 - 重要的是要注意，您只需要每页一个“ID”。目前，它看起来像你会经常重复'ideas_box'。 –

+0

非常感谢您的帮助，完美工作！当然是 – icydash

回答

0

正如我在评论中提及了 - 你就必须做更多的与您的代码的其余部分重新格式化得到这个工作正是你想要的，但我有一段时间了，所以我想我会告诉你如何制作整个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

0

将其设为position: absolute然后做z-index: 1

来源

2017-09-03 23:34:24 slikk

相关问题

 相关问题