3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
目前较为常用的有三种。
相对定位 position:relative;
相对自身的位置发生偏移,偏移后视觉上会覆盖之后的普通文档流,偏移前的位置仍然被占据。
绝对定位 absolute;
相对于static定位意外的第一个祖先元素进行定位,若都没有发现则以html标签为参考进行定位。普通元素不会感知到absolute元素的存在,且视觉上也会被覆盖,即绝对定位不会占据普通流空间。使用场景:当想让元素参照特定参照物进行定位时使用。
需要注意的是,如果只设置position:absolue ;left/top采用默认的auto,就是相对于第一个非static祖先元素的padding。如果设置的是0,则相对border;
固定定位 fixed;
固定定位,种种表现都类似于absolue;只不过定位的元素是浏览器窗口。或者说是视窗。
其他定位值;
|