阅读量:3
<!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> 