<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠上下文</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
body {
background-color: white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,
transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
.one,
.two,
.three,
.four,
.five,
.six {
width: 200px;
height: 200px;
}
.one {
position: absolute;
z-index: -1;
background: #8874c1;
}
.two {
background: #4f6fc1;
margin-left: 100px;
}
.three {
float: left;
background: #51cd8d;
margin-top: -100px;
}
.four {
display: inline-block;
background: #9cd262;
margin-left: -100px;
}
.five {
position: absolute;
background: #d9ac4c;
margin-top: -130px;
margin-left: 50px;
}
.six {
position: absolute;
z-index: 1;
background: #d93953;
margin-top: -50px;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="one">one —— z-index为负值</div>
<div class="two">two —— block块状水平盒子</div>
<div class="three">three —— 浮动盒子</div>
<div class="four">four —— inline/inline-block水平盒子</div>
<div class="five">five —— z-index:auto/z-index:0</div>
<div class="six">six —— z-index为正值</div>
</body>
<script>
//如何用jquery获得每个ul下最后一个li
/* $(function () {
$("#mg").each(function () {
var y = $(this).children().last();
// alert(y.text());
y[y.length - 1].style.marginLeft = "200px";
console.log(y[y.length - 1].style.marginLeft);
});
}); */
</script>
</html>
转自: https://www.jianshu.com/p/8645b29f96b6