day11 html5

最新推荐文章于 2024-06-20 11:15:00 发布

原创最新推荐文章于 2024-06-20 11:15:00 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析CSS中的定位属性，包括static、absolute、relative的区别与应用。阐述了如何通过position属性实现元素的精确布局，以及z-index属性对定位元素层级控制的影响。

		day11

position的属性值：

    1: position:static 【静态定位】 (默认值：添加和不设置的效果一样的)

    2: position:absolute  【绝对定位】
        1: 绝对定位的参照物：
            已经有定位的父元素为参照物
            如果父元素都没有定位或者没有父元素，以整个文档为参照物。
        2: 绝对定位的特点:
            不占据空间,脱离布局流

    3: position:relative;  【相对定位】
        1: 参照物是自身默认的位置
        2: 特点：
            (1)占据空间的，不破坏布局流。
            (2)如果一个元素有相对定位，也支持margin:0 auto;

     包含块的设置：
    1：给父元素添加position:relative;目的：让当前父元素形成参照物（包含块）
    2：给要做定位的元素添加position:absolute; 移动位置

    默认情况下：
    结构里面后写的元素添加定位，会把前写元素盖住
     控制定位元素的层次关系：
    z-index:;
        属性值：一个数字，数字值越大越靠上层显示。能接收负数。
        默认值auto