大家好，欢迎来到IT知识分享网。
1.绝对定位
绝对定位position: absolute是元素定位的方法之一，具有以下特性：
(1)绝对定位的元素空间是全释放的
(2)默认下绝对定位的元素位置是普通流时的位置
(3)绝对定位元素的位置只与参照元素和定位属性有关
(4) 默认下绝对定位的参照数元素是浏览器
(5)通给父元素加上相对定位。从而让子元素的绝对定位元素的参照元素变为父元素
(6)默认下后写的绝对定位元素会覆盖先写的绝对定位元素
(7)可以通过z-index这个属性来确定绝对定位元素之间覆盖的顺序，值大的会覆盖小
2.相对定位
相对定位position: relative本身也是普通流，相对定位本义就是相对该元素原位置进行定位
3.具体实现代码运行
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> .big-box {
width: 500px; height: 500px; margin: 100px auto; border: 2px solid #000; position: relative;/* 设置相对定位 */ top: 100px; left: 200px; } .box1 {
width: 200px; height: 200px; background: skyblue; position: absolute;/* 设置元素为绝对定位元素 */ top: 80px; /* 定位属性完成对元素的定位 */ left:0; /* bottom: 100px; */ /* right: 0; */ z-index: 11; /* box1中的z-index值大于box2，所以box1会将box2覆盖 */ } .box2 {
width: 100px; height: 100px; background: orange; position: absolute; top: 0; left: 0; z-index: 10; } </style> </head> <body> <div class="big-box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html> 运行结果为：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/130763.html
