当你向上滚动时，我的 css 表单框 运行 在 header 上：/
my css form boxes run over the header when you scroll up :/
我有一个复杂的项目，其中包含一些 Rex 代码...
我正在修改我的表单元素，一切正常，但当您向下滚动页面时，复选框会覆盖 header...
我无法加载图片，但这里有一个 link 如果你想要一个外观，请看...
这里是复选框的css...
.roundedFive {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px 5px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.roundedFive label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.roundedFive label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.roundedFive label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.roundedFive input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type=text] {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 5px;
background: rgba(255,255,255,0.5);
margin: 0 0 20px 0;
}
这里是 html（带有 REXX 代码）（旧 IBM 代码）
Say '<div id="cgibody1">'
Say '<table width="300">'
Say '<thead><tr><th colspan="3" scope="col"><h2>Individual Tests OR Run ALL tests</h2></th></tr></thead>'
Say '<tr><td WIDTH="50px" align="right">'
Say '<div class="roundedOne">'
Say '<input type="checkbox" name="memory" id="roundedOne" />'
Say '<label for="roundedOne"></label></td>'
Say '</div>'
Say '<td width="50px">Memory</td>'
这是源代码（没有 cgi REXX）
<div id="header">
<div id="logo"><img src="/pes/images/zlogo1.png" width="36" height="42"> </div>
<div id="enterprise">Palladium Z1 WFBSCD13 <span style="color:gold"><?php echo $host ?></span></div>
<div id="topmenu">
<ul class="nav">
<li class="nav-item"><a href="home">Main</a>
<ul class="submenu">
<li><a href="/pes/mainjob.php" target="_blank">Health Status</a></li>
<li><a href="diagmenu.cgi?hostname=<?php echo $host ?>" target="_blank">Diags</a>
</ul></li>
<li class="nav-item"><a href="home">Logs</a>
<ul class="submenu">
<li><a href="aplog.cgi?type=file&logname=configmgr.alertlog&hostname=<?php echo $host ?>" target="_blank">Display configmgr.alertlog</a></li>
<li><a href="aplog.cgi?type=file&logname=configmgr.log&hostname=<?php echo $host ?>" target="_blank">Display configmgr.log</a></li>
<li><a href="aplog.cgi?type=file&logname=ET3_activity.log&hostname=<?php echo $host ?>" target="_blank">Display ET3_activity.log</a></li>
<li>aplog.cgi?hostname=<?php echo $host ?>&type=bm&logname=apsm&date=<?php echo $datestamp[DTE 0] ?>" target="_blank">Display apsm.log</a></li>
<li><a href="aplog.cgi?type=file&logname=/var/log/messages&hostname=<?php echo $host ?>" target="_blank">Display /var/log/messages</a></li>
</ul></li>
<li class="nav-item"><a href="home">Hardware</a>
<ul class="submenu">
<li><a href="aplog.cgi?type=file&logname=scd.et3confg&hostname=<?php echo $host ?>" target="_blank">Display Hardware Configuration</a></li>
<li><a href="aplog.cgi?type=file&logname=scd.et3confg&whole=summary&hostname= <?php echo $host ?>" target="_blank">Summarize Offline Hardware Resources</a> </li></ul>
</ul>
</div></div>
<body>
</div></div>
<div id="cgibody0">
<form name="diagnostics" method="get" action="rundiags.cgi">
<p>Select which tests to run, the domains to run on, then click "Run Tests".
<input type="hidden" name="hostname" value="WFBSCD13"></p>
<input type="hidden" name="caller" value="pdz"></p>
</div>
<div id="cgibody1">
<table width="300">
<thead><tr><th colspan="3" scope="col"><h2>Individual Tests OR Run ALL tests</h2></th></tr></thead>
<tr><td WIDTH="50px" align="right">
<div class="roundedOne">
<input type="checkbox" name="memory" id="roundedOne" />
<label for="roundedOne"></label></td>
</div>
我需要一双能看到我看不到的东西的眼睛，希望能在这件事上提供帮助，因为这是我在此页面上的最后一个问题...谢谢...
对于这个问题，您必须在页眉中添加 z-index:9999 样式。 Z-index 用于在元素上显示元素，例如如果您想在另一个元素 (y) 之上显示一个元素 (y)，则使用具有正值和负值的 z-index。正值元素会过来，负值元素会在元素后面。
我有一个复杂的项目，其中包含一些 Rex 代码...
我正在修改我的表单元素，一切正常，但当您向下滚动页面时，复选框会覆盖 header... 我无法加载图片，但这里有一个 link 如果你想要一个外观，请看...
这里是复选框的css...
.roundedFive {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px 5px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.roundedFive label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.roundedFive label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.roundedFive label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.roundedFive input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type=text] {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 5px;
background: rgba(255,255,255,0.5);
margin: 0 0 20px 0;
}
这里是 html（带有 REXX 代码）（旧 IBM 代码）
Say '<div id="cgibody1">'
Say '<table width="300">'
Say '<thead><tr><th colspan="3" scope="col"><h2>Individual Tests OR Run ALL tests</h2></th></tr></thead>'
Say '<tr><td WIDTH="50px" align="right">'
Say '<div class="roundedOne">'
Say '<input type="checkbox" name="memory" id="roundedOne" />'
Say '<label for="roundedOne"></label></td>'
Say '</div>'
Say '<td width="50px">Memory</td>'
这是源代码（没有 cgi REXX）
<div id="header">
<div id="logo"><img src="/pes/images/zlogo1.png" width="36" height="42"> </div>
<div id="enterprise">Palladium Z1 WFBSCD13 <span style="color:gold"><?php echo $host ?></span></div>
<div id="topmenu">
<ul class="nav">
<li class="nav-item"><a href="home">Main</a>
<ul class="submenu">
<li><a href="/pes/mainjob.php" target="_blank">Health Status</a></li>
<li><a href="diagmenu.cgi?hostname=<?php echo $host ?>" target="_blank">Diags</a>
</ul></li>
<li class="nav-item"><a href="home">Logs</a>
<ul class="submenu">
<li><a href="aplog.cgi?type=file&logname=configmgr.alertlog&hostname=<?php echo $host ?>" target="_blank">Display configmgr.alertlog</a></li>
<li><a href="aplog.cgi?type=file&logname=configmgr.log&hostname=<?php echo $host ?>" target="_blank">Display configmgr.log</a></li>
<li><a href="aplog.cgi?type=file&logname=ET3_activity.log&hostname=<?php echo $host ?>" target="_blank">Display ET3_activity.log</a></li>
<li>aplog.cgi?hostname=<?php echo $host ?>&type=bm&logname=apsm&date=<?php echo $datestamp[DTE 0] ?>" target="_blank">Display apsm.log</a></li>
<li><a href="aplog.cgi?type=file&logname=/var/log/messages&hostname=<?php echo $host ?>" target="_blank">Display /var/log/messages</a></li>
</ul></li>
<li class="nav-item"><a href="home">Hardware</a>
<ul class="submenu">
<li><a href="aplog.cgi?type=file&logname=scd.et3confg&hostname=<?php echo $host ?>" target="_blank">Display Hardware Configuration</a></li>
<li><a href="aplog.cgi?type=file&logname=scd.et3confg&whole=summary&hostname= <?php echo $host ?>" target="_blank">Summarize Offline Hardware Resources</a> </li></ul>
</ul>
</div></div>
<body>
</div></div>
<div id="cgibody0">
<form name="diagnostics" method="get" action="rundiags.cgi">
<p>Select which tests to run, the domains to run on, then click "Run Tests".
<input type="hidden" name="hostname" value="WFBSCD13"></p>
<input type="hidden" name="caller" value="pdz"></p>
</div>
<div id="cgibody1">
<table width="300">
<thead><tr><th colspan="3" scope="col"><h2>Individual Tests OR Run ALL tests</h2></th></tr></thead>
<tr><td WIDTH="50px" align="right">
<div class="roundedOne">
<input type="checkbox" name="memory" id="roundedOne" />
<label for="roundedOne"></label></td>
</div>
我需要一双能看到我看不到的东西的眼睛，希望能在这件事上提供帮助，因为这是我在此页面上的最后一个问题...谢谢...
对于这个问题，您必须在页眉中添加 z-index:9999 样式。 Z-index 用于在元素上显示元素，例如如果您想在另一个元素 (y) 之上显示一个元素 (y)，则使用具有正值和负值的 z-index。正值元素会过来，负值元素会在元素后面。