absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
static 默认值。没有定位,元素出现在正常的流中
sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出
下面代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Position位置</title> <style> html, body { margin: 0; padding: 0; } .parent { margin: 0 auto; width: 200px; height: 200px; background: green; position: relative; } .child { width: 100px; height: 100px; background: yellow; position: absolute; top: 0; left: 0; } .fixed { position: fixed; bottom: 30px; right: 30px; height: 50px; width: 50px; background: red; } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="fixed"></div> </div> </body> </html>
如果parent给了relative,此时child会根据parent定位,如果没有给,默认position为static,child会找最近的且不是static的父元素定位,如下代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Position位置</title> <style> html, body { margin: 0; padding: 0; } .parent { margin: 0 auto; width: 200px; height: 200px; background: green; } .child { width: 100px; height: 100px; background: yellow; position: absolute; top: 0; left: 0; } .fixed { position: fixed; bottom: 30px; right: 30px; height: 50px; width: 50px; background: red; } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="fixed"></div> </div> </body> </html>
可以看到此刻子元素找到了body,根据body位置去定位了~~
标签: CSS
文章来源:
前端这点事
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
还木有评论哦,快来抢沙发吧~