大家好，欢迎来到IT知识分享网。
说明
相对定位是元素移动位置的时候，是相对于它原来坐标的位置来说的，不是相对于浏览器，也不是相对于父元素。典型的以自我为中心。
语法：
选择器 {
position: relative; } 相对定位最典型的应用是给绝对定位当父亲的，是来限制绝对定位的。
示例
没有加相对定位：两个盒子以标准流排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 {
width: 200px; height: 200px; background-color: pink; } .box2 {
width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="box1"> </div> <div class="box2">
</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>Document</title> <style> .box1 {
position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: pink; } .box2 {
width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="box1"> </div> <div class="box2">
</div>
</body>
</html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/122296.html
