Question

是否可以使元素出现在父元素的后面？

喜欢这样

<div style="background-color:blue;">
   blue
  <div style="margin:0 0 0 0 -10px;background-color:red;">red</div>
</div>

蓝色div覆盖红色div，但是左边有10个像素？

Answer 1

是的，可以使用<div class="hellcontainer"> <div id="chart_div"></div> </div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> google.load("visualization","1",{packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'mes ano'); data.addColumn('number', 'num trabalhos'); data.addRows(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>); var options = {'title':'Month Count', 'width':400, 'height':300}; var chart=new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data,options); } </script>：

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox Reference</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
    valid = true;
    if($('input[type=checkbox]:checked').length == 0)
    {
        alert ( "ERROR! Please select at least one checkbox" );
        valid = false;
    }
    return valid;
});
});
</script>
</head>

<body>
<form  name="myform" id="myform" action="" method="post" onSubmit="return validate();">
<?php
$values = array(1,2,3,4,5);
foreach($values as $id)
{
echo "<input type='checkbox' name='checks[]' value='".$id."'><br>"; 
}

?>
<input type="submit" name="submit" value="submit">
</form>

<?php
?>
</body>
</html>

＆＃13;

如果您想要将它们放在同一行，那么您还需要放置position和<div style="background-color:blue;position:relative;"> blue <div style="background-color:red;position:relative;left:-10px;">red</div> </div>。

＆＃13;

top: 0;

＆＃13;

Answer 2

可以通过向内部div添加否定z-index来实现。您必须注意，此方法仅在父元素没有z-index值时才有效。

＆＃13;

div {
  width: 80px;
  height: 80px;
}
.outer {
  background-color: blue;
  position: relative;
}
.inner {
  margin: 0 0 0 -10px;
  background-color: red;
  position: relative;
  z-index: -1;
}

＆＃13;

<div class="outer">
  blue
  <div class="inner">red</div>
</div>

＆＃13;

使元素出现在元素后面但放在元素内部

2 个答案: