No.23 CSS--定位

news/2025/2/27 16:47:36/文章来源:https://www.cnblogs.com/bltstop/p/18741072

 

一、定义

  • position属性指定了元素的定位类型。

  • 其中，绝对定位和固定定位会脱离文档流.
  • 设置定位之后:可以使用四个方向值进行调整位置:Ieft、top、right、bottom.

二、相对定位

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;background-color: aquamarine;
            position: relative;           left: 400px;top: 50px;}</style>
</head><body><div></div>
</body>

　　

三、绝对定位（脱离文档流）

  • 每设置一个绝对定位，就会有一层。
  • 两个绝对定位层之间也会出现压盖的情况。
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;background-color: aquamarine;
            position: absolute;left: 400px;top: 50px;}</style>
</head><body><div></div>
</body>

　　

 

四、固定定位（脱离文档流 ）

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;background-color: aquamarine;
            position: fixed;left: 5px;top: 300px;}</style>
</head><body><div></div>
</body>

 

应用场景示例：

五、问题

  • 父级有相对定位和绝对定位，子级的相对定位和绝对定位会跟随父级的变化而变化。
  • 父级没有相对定位和绝对定位，子集的相对定位和绝对定位是基于向上一级直至文档。

 

六、z-index属性

  • 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
            z-index: 3;

　　

 

 

　　

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/890696.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器人保养指南周期性检修

机器人保养指南周期性检修

机器人保养指南——那智不二越机器人日常维护、专业维修与周期性检修在进行那智不二越机器人的日常检查、维修、部件更换或任何其他相关作业时，首要且至关重要的一步是确保已切断电源，只有在完全断电的情况下，方可安全地进行后续操作。此外，还应在一次电源等关键位置设置明…
阅读更多...
OERV兴趣探索：模拟器移植

OERV兴趣探索：模拟器移植

最近看了很多开源项目，主要都集中在模拟器方面，我指的是游戏模拟器比如GameBoy或者PlayStation这一类。现在想玩这系列的游戏可以在手机或者电脑下载相应的模拟器，并且获取对应的ROM文件，不过也有一些模拟器是可以运行在Linux上面的，为了进一步探索，我选择了相对较小的项…
阅读更多...
HTTP协议与RESTful API实战手册（二）：用披萨店故事说透API设计奥秘

HTTP协议与RESTful API实战手册（二）：用披萨店故事说透API设计奥秘

title: HTTP协议与RESTful API实战手册（二）：用披萨店故事说透API设计奥秘 🍕 date: 2025/2/27 updated: 2025/2/27 author: cmdragon excerpt: 📦 本系列第二篇通过披萨店创业的完整案例，手把手教你： 用外卖订单理解HTTP协议细节 5个RESTful设计常见误区与修正方案 …
阅读更多...
全局注册svg批量自动引入，动态修改svg以及样式配置问题

全局注册svg批量自动引入，动态修改svg以及样式配置问题

1.安装依赖npm i vite-plugin-svg-icons2.文件存放svg 3.全局组件svg-icon（直接放到全局组件目录下）<template><svg class="svg-icon"><use :xlink:href="`#icon-${props.name}`" class="mySVG":style="stroke: + props.…
阅读更多...
msyql中单表语句

msyql中单表语句

二、聚合函数 （1）max 最小值 select max(math) from student （2）min 最大值 select min(math) from student （3）sum 总数 select sum(math) from student （4）avg平均数 select avg(math) from student （5）count 统计个数 select count(math) from stu…
阅读更多...
Java SpringBoot实现简易扫码登录流程 附项目代码

Java SpringBoot实现简易扫码登录流程 附项目代码

SpringBoot实现简易扫码登录流程，附项目代码先总结流程：移动端请求扫码登录，服务端生成二维码并缓存二维码ID和状态，将二维码的Base64格式返回给前端展示； PC端页面轮询检查二维码状态； 手机扫码后调用扫码接口，携带移动端的Token和二维码ID请求服务端，服务端根据扫码的…
阅读更多...
Salesforce宣布2025年不招工程师，技术岗位真的会消失吗？

Salesforce宣布2025年不招工程师，技术岗位真的会消失吗？

Salesforce CEO Marc Benioff 最近放出了一条让科技圈热议的消息：2025年，Salesforce将不再招聘新的软件工程师。作为全球最大的CRM软件提供商之一，这一决定引发了许多人对AI对就业市场影响的思考。 AI改变工作模式，工程师岗位需求减少 Marc Benioff 在采访中透露，2024年，…
阅读更多...
mysql查询语句

mysql查询语句

一、查询语句 1、select查询一个表中的所有数据 格式： select * from 表名 ; 案例： select * from student ;2、查询部分字段信息数据 格式： select 字段1,字段2 from 表名; 案例： select name,math from student;3、查询字段可以用as 取别名 格式： select 字…
阅读更多...
Vue3安装配置+VSCode开发环境搭建，超详细保姆级教程（图文）

Vue3安装配置+VSCode开发环境搭建，超详细保姆级教程（图文）

目录1. node.js 下载安装2. 查看 node.js 是否安装成功3. 配置 npm 下载的默认安装、缓存环境(1) 添加文件夹(2) 设置系统环境变量(3) 修改下载模块的存放路径4. npm 镜像源配置(1) 输入cmd打开命令提示符窗口,(2) 如果配置报错(3) 查看镜像配置是否成功5. 安装 vue-cli 工具6.…
阅读更多...
Windows下Redis哨兵模式配置以及在.NetCore中使用StackExchange.Redis连接哨兵

Windows下Redis哨兵模式配置以及在.NetCore中使用StackExchange.Redis连接哨兵

一，Redis哨兵模式配置 1，下载Redis，然后解压复制5个文件夹分别如下命名。 2，哨兵模式配置 （1）修改主节点Redis-6379中redis.windows.conf配置文件如下 （2）修改从节点Redis-6380中redis.windows.conf配置文件如下（3）配置哨兵，在哨兵文件夹下添加Sentinel.conf配置文件…
阅读更多...
zabbix监控http

zabbix监控http

一、模版复制与配置变更 1、模版复制2、修改宏 全克隆并修改好宏端口二、测试httpd服务状态 1、检查模块是否启用 apachectl -M | grep status修复 #ServerName www.example.com:80 ServerName 192.168.0.152:13000 重新执行后正常2、检查状态 http://112.81.86.33:13001/serve…
阅读更多...
Ubuntu 22.04 或更高版本的系统中安装.NET Core 3.1的解决方案（使用1panel进行可视化演示）

Ubuntu 22.04 或更高版本的系统中安装.NET Core 3.1的解决方案（使用1panel进行可视化演示）

第一步:先安装长期支持版本.NET 6 或更高 (这一步不是必须的，如果是干净的服务器建议这么做，因为安装完后会自动创建路径和环境变量方便后续操作)安装方法sudo apt update sudo apt install -y dotnet6如果安装时出现异常：A fatal error occurred. The folder [/usr/lib/dot…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023