• 技术文章 >web前端 >css教程

    CSS相对定位和绝对定位的关系解析

    长期闲置长期闲置2022-08-09 11:00:13转载184
    本篇文章给大家带来了关于css的相关知识,其中主要介绍了关于css的绝对定位和相对定位的相关问题,相对定位是元素在移动位置的时候,是相对于它原来的位置来说的,绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的,下面一起来看一下,希望对大家有帮助。

    (学习视频分享:css视频教程html视频教程

    position:relative 相对定位详解

    相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。

    相对定位的特点:

    position:absolute 绝对定位详解

    绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的(拼爹型)。

    绝对定位的特点:

    下面讲解子绝父相的由来和具体使用:

    子绝父相的意思是指:子级是绝对定位的话,父级要用相对定位。

    总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有定位,则是绝对定位。

    示例如下:

    css标签的相对定位和绝对定位是通过position属性来控制的,相对定位和绝对定位不改变元素的大小形状,只改变元素的位置。

    一、position属性的值有以下几种:

    一个没有使用定位的例子:

    在这里插入图片描述
    显示结果如下:

    在这里插入图片描述

    二、相对定位

    相对定位的参考点是标签定位之前的位置,不是相对于父节点、同级节点或浏览器。

       相对定位的元素,通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离,right 表示相对于原本位置的右外边界左移的距离,top 表示相对于原本位置的上外边界下移的距离,bottom 表示相对于原本位置的下外边界上移的距离。并且,偏移量可以是正值,也可以是负值,负值表示向相反的方向移动。
    
       left、right、top、bottom 这 4 个属性的值,可以是长度值(可以是绝对单位或相对单位),也可以是百分比。使用百分比时,水平偏移量根据其父元素 width 属性的值计算得到,垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是,在设置偏移时,如果父元素没有显式定义 height 属性,就等同于 height 属性的值为 0。

    对上例进行修改,对div2使用相对定位:

    在这里插入图片描述
    效果如下:

    在这里插入图片描述

    三、绝对定位:

    绝对定位相对于最近的定位的祖先元素进行定位,如果没有祖先元素,他便使用文档主体(body)即浏览器,并随页面滚动一起移动;如果父级有定位则看父级,如果父级没有定位则继续向上找父级。

    绝对定位的元素是脱离文档流的,即直接在标准流中删除,所以元素原来的位置会被占用。

    对上例进行修改(无父节点):

    在这里插入图片描述
    效果如下:

    在这里插入图片描述
    再如(父节点有定位):

    不使用绝对定位时:

    在这里插入图片描述
    效果如下:

    在这里插入图片描述
    使用绝对定位:

    在这里插入图片描述
    效果如下:

    在这里插入图片描述

    (学习视频分享:css视频教程html视频教程

    以上就是CSS相对定位和绝对定位的关系解析的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:css
    上一篇:CSS定位属性之相对定位relative属性详解 下一篇:css定位详解--相对定位、绝对定位和固定定位
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 表格的CSS样式有哪些• css里outline是什么• 聊聊怎么使用CSS滤镜实现圆角及波浪效果• 聊聊如何使用CSS实现比普通阴影更加立体的阴影效果!• css的内联样式是什么
    1/1

    PHP中文网