2019-04-17父级定位
2019-04-29 本文已影响0人
果冻_4c9b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width:960px;
height: 400px;
background:#0000FF ;
position:relative;
margin: 0 auto;
}
.box1, .box2{
width: 100px;
height: 100px;
}
.box1{
position: absolute;
background: #640045;
left: 100px;
top: 100px;
}
.box2{
position: absolute;
background: wheat;
left: 400px;
top: 100px;
}
</style>
</head>
<body>
</body>
<!-- 如果父级有定位
绝对定位的子集元素相对定位
-->
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</html>
z—轴提升等级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
position: relative;
}
#box1{
width: 100px;
height: 100px;
border: #0000FF 1px solid;
position: absolute;
background: red;
font-weight: bold;
/* 提升层级样式 */
z-index: 1;
}
#box2{
width: 100px;
height: 100px;
background: black;
position: absolute;
left: 10px;
top: 10px;
opacity: 0.4;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
</html>
