мои C формы коробки работать над головой при прокрутке вверх:/

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-индекс с положительными и отрицательными значениями. Элемент позитивного значения будет наступать, а элемент отрицательного значения пойдет за элемент.