CSS-定位

    技术2022-07-10  143

    一、定位

    定位:将元素定位到某个位置上。

    组成:定位模式 position(relative、absolute、fixed)和边偏移 (left、right、top、bottom) 定位分三种:相对定位、绝对定位、固定定位。

    1、相对定位

    position:relative; 相对于元素本身(自恋型) 特点:不脱离标准流、占有原来的位置、可以脱离父元素(毕竟是自恋型嘛)。 下面是代码:outer是父元素也就是粉红的的矩形,inner是子元素也就是黄色的矩形

    2、绝对定位

    position:absolute 分两种:1、如果父元素没有定位,则相对于视口viewport定位 特点:脱离标准流、不占位置 2、父元素有相对于定位且最好是relative,就是相对于父元素定位,可以脱离父元素。

    3、固定定位

    position:fixed; 相对于浏览器定位,最常见的就是某宝上面的最右边的跟着你下走的框。 特点:脱标不占位

    额外知识点

    z-index:叠放次序。 谁的值大,谁就在上边。

    Processed: 0.014, SQL: 9