html - 当你向上滚动 :/时，我的 css 表单框会越过标题

Question

我有一个包含一些 Rex 代码的复杂元素...

我正在修改我的表单元素，一切正常，但当您向下滚动页面时，复选框会覆盖标题... 我无法加载图片，但这里有一个链接，如果你想看一下...

这里是复选框的 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>

我需要一双能看到我看不到的东西的眼睛，希望能在这件事上提供帮助，因为这是我在此页面上的最后一个问题...谢谢...

Answer 1

对于此问题，您必须将 z-index:9999 样式添加到标题中。 Z-index 用于在元素上显示元素，例如如果您想在其他元素 (y) 之上显示一个元素 (y)，则使用具有正值和负值的 z-index。正值元素会过来，负值元素会在元素后面。