css的相对定位和绝对定位

2023-05-16

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

一、position属性的值有以下几种:
static:默认值,没有定位,元素出现在正常的流中。
absolute:使用绝对定位,相对于static定位以外的最近一个祖先元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。
relative:使元素相对定位,相对于自己的正常位置进行定位。
fixed:使元素绝对定位,相对于浏览器窗口进行定位。元素的位置通过left,top,right以及bottom属性进行规定。
inherit:规定应该从父元素继承position属性的值。

一个没有使用定位的例子:
在这里插入图片描述
显示结果如下:
在这里插入图片描述

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

   相对定位的元素,通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离,right 表示相对于原本位置的右外边界左移的距离,top 表示相对于原本位置的上外边界下移的距离,bottom 表示相对于原本位置的下外边界上移的距离。并且,偏移量可以是正值,也可以是负值,负值表示向相反的方向移动。

   left、right、top、bottom 这 4 个属性的值,可以是长度值(可以是绝对单位或相对单位),也可以是百分比。使用百分比时,水平偏移量根据其父元素 width 属性的值计算得到,垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是,在设置偏移时,如果父元素没有显式定义 height 属性,就等同于 height 属性的值为 0。

对上例进行修改,对div2使用相对定位:
在这里插入图片描述
效果如下:
在这里插入图片描述

三、绝对定位:
绝对定位相对于最近的定位的祖先元素进行定位,如果没有祖先元素,他便使用文档主体(body)即浏览器,并随页面滚动一起移动;如果父级有定位则看父级,如果父级没有定位则继续向上找父级。
绝对定位的元素是脱离文档流的,即直接在标准流中删除,所以元素原来的位置会被占用。
对上例进行修改(无父节点):
在这里插入图片描述
效果如下:
在这里插入图片描述
再如(父节点有定位):
不使用绝对定位时:
在这里插入图片描述
效果如下:
在这里插入图片描述
使用绝对定位:
在这里插入图片描述
效果如下:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css的相对定位和绝对定位 的相关文章

随机推荐

  • 判断任意两台计算机的IP地址是否属于同一子网络

    子网掩码是用来判断任意两台计算机的IP地址是否属于同一子网络的根据 最为简单的理解就是两台计算机各自的IP地址与子网掩码进行AND运算后 xff0c 如果得出的结果是相同的 xff0c 则说明这两台计算机是处于同一个子网络上的 xff0c
  • 版本控制工具Git(Windows端)

    一 操作方式 安装完成在开始菜单可以看到 1 Git GUI 就是图形窗口控制这个比较简单 2 Git Bash 推荐使用这个 xff0c 方便以后适用其他平台的配置 配置身份 验证是否成功 xff08 方便提交代码知道是谁提交的 xff0
  • JS基础:for...in、for...of、forEach(详解)

    for in循环 for in 语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性 for in 循环只遍历可枚举属性 像 Array和 Object 使用内置构造函数所创建的对象都会继承自Object prototype和St
  • 正则表达式语法

    量词 通过量词可以设置一个内容出现的次数量词只对前一个内容起作用 n 表示整好出现n次 m n 表示出现m到n次 m xff0c 表示出现m次以上 43 表示至少一个 xff0c 相当于 1 xff0c 例如 a 43 表示0个或多个 xf
  • 51单片机之——串口通信(含实现部分)

    目录 一 串口通信简介 二 前置知识 二 前置准备 三 实现单片机通过串口向电脑发送数据 四 实现单片机通过串口接收电脑发送数据 一 串口通信简介 本篇文章将实现两个部分 xff0c 第一部分为单片机通过串口向电脑发送数据 xff1b 第二
  • Java web速成之jsp

    一 JSP简介 1 1 jsp运行和环境搭建 1 知识目标 xff08 1 xff09 能够叙述Java web的发展历程 xff1b xff08 2 xff09 能够描述JSP引擎在JSP中的作用 xff1b xff08 3 xff09
  • 单片机学习总结

    51单片机的学习总结 经过一个学期的51单片机的学习 xff0c 对于51单片机有了很大的理解 由于我学的是汇编语言 xff0c 实验也是用的汇编语言 首先对于51单片机要了解他的内部结构 一个8位的CPU xff0c 一个片内振荡器及时钟
  • 【计算机三级网络技术】 快速求出IP地址块经聚合后的IP地址

    计算机三级 网络技术之快速求出IP地址块经聚合后的IP地址 相信大家在备考计算机三级网络技术都会遇到求多个IP地址聚合后的地址是什么的题目 xff0c 以下是一个小技巧 xff08 具体原理自己把十进制的IP地址和子网掩码换算成二进制理解一
  • Ubuntu虚拟机使用NAT连接 然后无法上网的情况

    问题描述 xff1a 以下为我的虚拟机的网络适配器配置 xff0c 使用的是NAT模式 正常连接上网络的时候虚拟机右上角会如下图所示 当网络down了以后 xff0c 就不会显示第一个 xff0c 那么这个时候就可以使用以下方法来解决 仅作
  • 【计算机网路】(3)网络层:IP地址组成、分类,子网划分

    目录 IP地址 xff08 32位 xff09 1 1 组成 1 2 分类 1 2 1 A B C三类IP地址的组成 1 2 2 私有地址 记 1 3 子网掩码 1 3 1 示例 求IP地址为192 168 1 0的网络号 1 4 DHCP
  • 【知识图谱】知识图谱入门详细介绍

    知识图谱 入门与介绍 文章目录 知识图谱 入门与介绍1 引言2 概念3 分类4 发展历程5 作用5 1 搜索5 2 问答5 3 辅助大数据分析 6 知识图谱的构建6 1 数据获取6 2 信息 xff08 知识 xff09 抽取6 3 知识融
  • vnc服务器配置—linux

    VNC服务器配置 vnc服务器是个远程控制服务器 需求 xff1a 在linux中装服务器端 xff0c 在windows中装客户端 xff0c 使得可以远程控制linux 首先下载vnc服务器 yum install tigervnc s
  • 18715 出栈序列

    18715 出栈序列 时间限制 1000MS 代码长度限制 10KB 提交次数 0 通过次数 0 题型 编程题 语言 不限定 Description 一种简洁的栈定义方法如下 int st 1000 top 61 0 以top作为栈顶指针
  • Ubuntu 打不开终端

    因为我在做python时做了应该是删除了软连接 xff0c 然后终端就打不开了 在网上寻找多个方法 xff0c 终于找到适合自己的 请注意 xff0c 这里可能会出现其他问题 xff0c 使用时请注意 因为进不去终端 xff0c 所以按ct
  • unity实现切割图片

    我们在找资源时有时候会遇到把一堆图片放进一张图片的情况 xff0c 往往需要将一块块小图片切割出来使用 xff1a 步骤 xff1a xff08 1 xff09 将Sprite Mode设置为Multiple 2 xff09 点击Sprit
  • 使用mybatis实现数据库插入数据

    xff08 1 xff09 在Dao层的实体类接口中添加相应函数 xff08 2 xff09 在相应的 xml文件中加入一个mapper标记 xff08 3 xff09 修改main 函数中的语句 xff0c 关键是修改了sqlId 修改指
  • 计算机图形学(三维观察投影线、视图变换、投影变换)

    一 三维观察流水线 概念 xff1a 将建立的三维场景显示在二维视口的过程称为三维观察流水线 在三维观察流水线中 xff0c 也就是在将三维场景显示在二维视口的过程中 xff0c 需要在不同坐标系下进行不同的操作 xff0c 这些坐标系包括
  • javascript:html嵌入javascript代码的三种方式

    一 概念 javascript是运行在浏览器中的脚本语言 xff0c 运行在浏览器的内存当中 xff0c 不需要程序员手动编译 xff0c 编写玩源代码之后 xff0c 浏览器直接打开解释执行 xff0c 简称JS 二 html嵌入java
  • idea中新建和写一个简单的vue项目

    一 使用ida创建一个vue项目 xff08 默认node js环境已配好 xff0c idea已加vue js插件 xff09 xff08 1 xff09 新建项目 xff08 2 xff09 观察项目目录结构 node modules文
  • css的相对定位和绝对定位

    css标签的相对定位和绝对定位是通过position属性来控制的 xff0c 相对定位和绝对定位不改变元素的大小形状 xff0c 只改变元素的位置 一 position属性的值有以下几种 xff1a static 默认值 xff0c 没有定