<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Example</title>
<style>
/* 相对定位的父元素 */
.relative-parent {
position: relative;
width: 200px;
height: 200px;
background-color: lightblue;
margin-bottom: 20px; /* 增加一些间距用于区分不同块 */
}
/* 绝对定位的子元素 */
.absolute-child {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: coral;
}
/* 绝对定位的父元素 */
.absolute-parent {
position: absolute;
top: 1050px; /* 距离顶部250px */
left: 200px; /* 距离左侧20px */
width: 200px;
height: 200px;
background-color: lightcoral;
}
/* 绝对定位的子元素，相对于绝对定位的父元素 */
.absolute-child-inside-absolute {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
}
/* 固定定位的父元素 */
.fixed-parent {
position: fixed;
top: 20px;
right: 20px; /* 固定在视口右上角 */
width: 200px;
height: 200px;
background-color: lightgreen;
}
/* 绝对定位的子元素，相对于固定定位的父元素 */
.absolute-child-inside-fixed {
position: absolute;
bottom: 10px;
right: 10px;
width: 100px;
height: 100px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="relative-parent">
相对定位的父元素
<div class="absolute-child">绝对定位的子元素</div>
</div>
<div class="absolute-parent">
绝对定位的父元素
<div class="absolute-child-inside-absolute">绝对定位的子元素</div>
</div>
<div class="fixed-parent">
固定定位的父元素
<div class="absolute-child-inside-fixed">绝对定位的子元素</div>
</div>
</body>
</html>
也可以多层嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Positioning Example</title>
<style>
/* 外层相对定位的父元素 */
.grandparent {
position: relative;
width: 400px;
height: 400px;
background-color: lightblue;
padding: 20px;
}
/* 中间绝对定位的父元素 */
.parent {
position: absolute;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: lightcoral;
padding: 20px;
}
/* 内层绝对定位的子元素 */
.child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: lightgreen;
padding: 20px;
}
/* 孙子元素 */
.grandchild {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: lightpink;
padding: 20px;
}
</style>
</head>
<body>
<div class="grandparent">
外层相对定位的父元素
<div class="parent">
中间绝对定位的父元素
<div class="child">
内层绝对定位的子元素
<div class="grandchild">
孙子元素
</div>
</div>
</div>
</div>
</body>
</html>
