关于position的定位的相关问题

来源:互联网 发布:轰趴馆 知乎 编辑:程序博客网 时间:2024/05/22 06:58

1.一个按钮,移上去显示另一个选择框,效果图如下:

这里写图片描述

第一次的实现方式,是让按钮固定了宽度,让另一个选择框的定位方式是position:absolute; 正因为固定了宽度,所以就出现了下图的效果:

这里写图片描述

第二次修改,删除了宽度,把另一个选择框的right:-145px ;改为了left:calc(100% + 10px);
修改的css如下:

这里写图片描述

最终得到了想要的效果.

2.position的兼容性问题

原因:盒子模型的不同,导致出现以下的结果;
浏览器: chrome, firefox
这里写图片描述

这是chrome的效果:

这里写图片描述

这是firefox的效果:

这里写图片描述

处理方法:将left改为了margin-left.
这里写图片描述

0 0
原创粉丝点击