<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <style> .parent{ width:200px; height: 200px; background-color: aqua; position: absolute; left: 0px; top:0px; } span{ display: block; width: 40px; height:40px; border: solid brown 1px; margin:1px; } .absolute{ position: absolute; right: 0px; top:0px; } .relative{ position: relative; left:160px; bottom:40px; } .fixed{ position: fixed; left:160px; top:0px; } .button{ position: absolute; left: 0px; top:220px; } .button button{ margin:1px; color:white; background-color: brown; } </style> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> function addClass(clazz ,obj){ $('#targ').attr("class",clazz); $(obj).css("background-color","blue"); $(obj).siblings().css("background-color","brown"); } </script> </head> <body> <div class="parent"> <span>1</span><span id="targ">2</span><span>3</span><span>4</span> </div> <div class="button"> <button onclick="addClass('absolute',this)">为2添加样式 absolute</button><br> <button onclick="addClass('relative',this)">为2添加样式 relative</button><br> <button onclick="addClass('fixed',this)">为2添加样式 fixed</button><br> <button onclick="addClass('',this)">为2移除样式</button> </div> </body> </html>
结果：
结论：
absolute 和 fixed 异次元，relative 次元
fixed 是相对视窗定位
absolute 是相对父元素定位
relative 是相对自己定位