position 图文详解

    技术2023-05-27  77

    在我们接触html的时候,相信大家总是会遇到这样的问题 1.除了利用边距,可以实现指定位置的放置,还有没有其他方式呢? 2.当我们想让元素实现重叠的时候,应该怎么办 ? a、定位背景 为了解决当边距实现不了元素放置指定位置的时候,咋整? b、定位定义 定位顾名思义就是把指定元素放置到指定位置 c、定位功能 只要是你能看到的位置,无所不能

    一、默认定位

    position: static

    默认值。没有定位,元素出现在正常的流中 对应的css: 结果显示: 我们可以很清楚的看到,三个块就是默认位置,所以默认定位是原始位置

    二、固定定位

    position: fixed

    生成绝对定位的元素,相对于浏览器窗口进行定位。可以放在页面任何位置

    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 对应的css: 结果显示: 随着页面的滚动,ul的位置不变,所以定位是相对浏览器视窗定位的

    三、相对定位

    position: relative

    生成相对定位的元素,对于自己原始位置进行定位 相对的css: 结果显示: 元素给自己相对定位,经过移动发现其相对自己原来位置定位,移动后不占空间,移动前的空间保留

    四、绝对定位

    position: absolute

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 对应的css: 结果显示: 相对父元素的定位,给父元素加相对定位,给子块加绝对定位。如果父元素没有,层级往上找,最后到body

    五、结论

    relative 相对定位,相对自己定位,原始位置保留 新位置不占空间 ,层级变高

    absolute 绝对定位,相对于父级元素中最近带有定位属性的元素去定位 ,定位前后都不占位置

    fixed 固定定位,相当于浏览器视窗定位

    值得注意的是:在absolute定位中,其父级元素,不单是指父亲,而是父亲元素 及以上所有的元素;

    Processed: 0.010, SQL: 9