HTML div需要在所有其他控件之上

时间:2013-04-24 01:36:22

标签: html css opacity

父屏幕上的某些控件正在通过div出血(见图)。我需要这个div在所有其他控件之上。现在,单选按钮列表和选项卡以某种方式位于顶部。

enter image description here

以下是对话框的声明:

<div id="divSaveAnalysis" style="display: block; opacity: 100; width: 350px; font-size: 40px; position: absolute; top: 35px; left: 100px; background-color: rgb(247, 219, 111); padding: 15px; border: 1px solid #000;">
    <div id="saving" style="font-size:medium; font-weight:bold;">
        <span id="savingSpan" style="font-size: xx-large">Saving Analysis...</span>
        <img src="css/images/Indicators/Activity/GearGreen_66x66.gif" style="float: right; height: 80px;"
            title="Saving FLSA Analysis" alt="Saving..." />
        <br />
        <br />
        <div><span id="savingReport" style="font-size: small;"></span></div>
        <div><span id="savingInputs" style="font-size: small;"></span></div>
        <div><span id="savingResults" style="font-size: small;"></span></div>
        <div><span id="savingComplete" style="font-size: small;"></span></div>
    </div>
</div>

div的计算样式是:

background-color: rgb(247, 219, 111);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 0.9090908765792847px;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 0.9090908765792847px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 0.9090908765792847px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 0.9090908765792847px;
color: rgb(51, 51, 51);
display: none;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 40px;
height: auto;
left: 100px;
line-height: 17.99715805053711px;
opacity: 1;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
position: absolute;
text-align: left;
top: 35px;
visibility: visible;
width: 350px;

3 个答案:

答案 0 :(得分:1)

您可以使用z-index更改联系人堆栈的方式。默认情况下,它基于内容加载页面的顺序。

默认情况下,z-index为'auto'。尝试将其设置为100之类的整数。

z-index:100;
position:absolute;

使用z-index时,您还必须更改内容的位置值。

您可以在此处阅读有关z-index的更多信息http://www.w3.org/TR/CSS2/visuren.html#z-index

答案 1 :(得分:0)

设置z-index将控制元素的堆叠顺序。

#divSaveAnalysis {
  z-index:10000;
}

答案 2 :(得分:0)

你需要添加属性 z-index:99999;

并确保添加

position: relative; 

让z-index工作。