【前端攻城狮之路】position定位机制

    xiaoxiao2021-08-27  62

    CSS position属性:

    static——默认方式,形成文档流

    relative——相对于原来(普通流)的位置进行偏移

    演示地址:点击打开链接

    absolute——脱离原来的文档流,独立定位,display属性变成block,可能覆盖其他成分。

    演示地址:点击打开链接

    fixed——固定定位,定位坐标系是整个视窗,网页下拉时保持不动

    演示地址:点击打开链接(请在全屏下查看演示)

    知识点补充

    1. 设置了浮动的元素也脱离普通的文档流(同absolute),进入浮动流空间(里面是所有设置了浮动的元素),故可能与普通文档流中元素发生重叠覆盖。

    演示地址:点击打开链接

    注:经测试,浮动的div可以覆盖普通文档流中的div,但是对于文本则不会覆盖,而是会产生文字环绕效果(行框围绕浮动框)。

    2.margin-left和left两种位移方式

    机制:

    margin-left——通过设置元素的外边距来达到位移的效果

    left——相对于最近的父对象进行定位,常与position:absolute联用进行绝对定位

    效果:

    position:relative时,两种方式效果相同,都是以父元素为基准

    position:absolute时,由于元素脱离文档流,left此时以浏览器窗口为基准,使绝对定位生效;而margin_left仍是以父元素为基准。

    转载请注明原文地址: https://ju.6miu.com/read-677257.html

    最新回复(0)