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

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

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

语法

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

relative

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

absolute

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

fixed

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

float: left;

微信小程序-元素的定位相对绝对固定_第1张图片

你可能感兴趣的:(小程序,微信小程序)