微信小程序-元素的定位相对绝对固定

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_42514606/article/details/100127856

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

语法

position: relative; //相对定位
position: absolute; //绝对定位
position: fixed; //固定定位
// 然后上下左右来定位其距离
left : 1px；
right : 1px;
top : 1px;
bottom : 1px;

relative

相对相对，就是相对于自己本身在流中的位置的偏移，元素框偏移某个距离。元素扔保持其未定位前的形状，它原来所占的空间扔保留，就是人走了，但是坑还在那。

absolute

绝对绝对，就是位置是觉得，其他元素变化了，他也不动, 但是有个前提就是相对于父元素 —— 前提是父元素的位置是确定的元素框从文档流中删除，并相对于其包含块定位，包含快可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 这个就是人走茶凉。

fixed

这个牛逼了，指哪打哪！就可他名字一样。 还有一个对应的float，主要是用于对于图片的定位，比如一篇文章开头有个图片。

float: left;

在这里插入图片描述