2020.10.7定位 静态定位 相对定位 绝对定位 固定定位 粘性定位 半圆制作方法

静态定位

posintion : static;(属于标准流
)

相对定位

position: relative;
1.相对于原来的位置
:top :100px;(距离原来的位置向下100px)
2.注意:保留原来的位置

绝对定位

position: absolute;
1.若果没有父级或父级没有定位这相对于浏览器定位
2.如果 有父级,则相对于最近有定位的父级定位
3.不保留原来的位置(相当于浮动了)

定位常用

子绝父相:子级用绝对定位不占用位置,父级用相对定位把位置占住

固定定位

1.相对于浏览器的可视窗口定位
2.不保留标准化原来的位置
跟 绝对定位很像

固定定位到版心两侧的小算法

距离等于页面的50%+版心的50%就可以定位到版心右侧

left：50%；

margin-left: 50%;

粘性定位

1.相对于可视页面的定位
2.保留原来的位置 （相对定位与 固定定位的结合）
3.必须设置了 top left bottom right 其中之一才会其效果
4。IE不支持

半圆制作