htmlCSS-----定位

目录

前言

定位

 分类和取值

定位的取值

 1.相对定位

 2.绝对位置

元素居中操作

3.固定定位


前言

        今天我们来学习html&CSS中的元素的定位,通过元素的定位我们可以去更好的将盒子放到我们想要的位置,下面就一起来看看吧!

定位

定位position属性,可以让我们将元素从文档流中取出,然后使用方位词属性(left top right bottom)精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式,例如放在另外一个元素上面或者固定在浏览器的显示区某个位置

 分类和取值

在html&CSS中定位分为4大类,分别是静态定位、相对定位、绝对定位和固定定位。而我们平时默认的都是静态定位,因此我们可以去通过position属性去改变定位的类型。

定位的取值

描述
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed生成固定定位的元素,相对于浏览器窗口进行定位。
relative生成相对定位的元素,相对于其正常位置进行定位。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

静态定位实际上是默认的样式,元素保持原来的性质去排列放置,所以就不去做详细的说明了。下面我会一一介绍相对定位、绝对定位和固定定位。 

 1.相对定位

relative

相对定位能让元素保持原文本流位置的同时,可以通过方位属性进行相对于原位置的偏移。

(定位元素才有的方位属性: top | bottom | left | right,值一般使用px单位或%值。)

  • 特点

    不会脱离文档流

    不影响元素本身的任何特性

    如果不加方位词偏移那么没有任何影响

示例:

html代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo.css">
</head>
<!-- 这里的body是父类元素,把其中的字体间隔设为0可以删除掉元素本身固有的间隔 -->
<body style="font-size: 0;"><!-- 相对定位的特点 --><div class="box"> </div><div class="boo"></div>
</body>
</html>

CSS代码:

/* 相对定位 */
.box{position: relative;left: 100px;background-color: red;height: 200px;display: inline-block;width: 200px;
}
.boo{background-color: blueviolet;height: 200px;display: inline-block;width: 200px;
}

效果:

 这里的红色把紫色的部分给覆盖掉了,因为红色的盒子设置了相对位置类型然后左移100个像素,所以会把原来紫色的部分给覆盖了。

以下是原来默认位置样式(静态位置)的效果(对比上图):

 2.绝对位置

absolute

绝对定位能让元素脱离文档流(原地起飞...),使用方位属性相对于最近的有定位的父级元素进行偏移;

注意!方位属性初始值不是0,而是auto。

方位属性left和top 优先级比 right和bottom高,比如一个元素既拥有left也拥有right,最终位置以left为准。

  • 特点

    脱离文档流

    元素宽高默认值为0

    找不到最近的定位父级则相对于body标签

    一般配合相对定位使用(参照物)

    会将元素转换成块元素

    设置了绝对定位,没有设置层级;html后写居上

    margin:auto 暂时失效

 基点(起始点/坐标原点)

绝对定位的基点是会往父元素找,如果父元素是相对定位(relative )就以此为基点,如果不是的话就继续往上找,直到html元素为止。

 绝对定位的元素跟浮动元素是有点相似的,但绝对定位是完全脱离文档流。

应用场景 

1.元素不会占据页面空间

2.元素需要移动到指定位置

使用示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    /* 绝对定位 */.fuc{position: absolute;left: 100px;background-color: red;height: 200px;display: inline-block;width: 200px;}.hhh{background-color: blueviolet;height: 200px;display: inline-block;width: 200px;}</style>
</head>
<body style><!-- 绝对定位 --><div class="fuc" ></div><div class="hhh"></div>
</body>
</html>

效果:

 这里红色的盒子浮起来了,所以紫色的盒子是在最左边的,然后红色的盒子相对于基点右移了100个像素点,所以会覆盖掉紫色盒子的右半部分。

元素居中操作

 元素居中是绝对定位最常见的操作,下面看代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    /* 元素居中 */.leimu{position: absolute;/* 宽度和高度必须自己设置,绝对定位是默认为0的 */height: 100px;width: 100px;/* 这里是把盒子的起点定位为父元素盒子的中心位置,但并没有实现盒子居中 */left: 50%;top: 50%;background-color: blueviolet;/* 这里要设置margin左和上分别左移盒子宽度的一半和上移高度的一半 */margin-left: -50px;margin-top: -50px;}  </style>
</head>
<body><div style="height: 300px;width: 300px;border: 2px solid red;position: relative;"><div class="leimu"></div></div>
</body>
</html>

3.固定定位

fixed

固定定位能让元素脱离文档流,使用方位属性相对于浏览器可视区进行偏移;

  • 特点

    脱离文档流

    元素宽高默认值为0

    margin:auto失效

固定定位的基点(起始点)就是当前视口的起始点,换句话说就是当前页面的大小,默认视口大小=body 大小=html大小

应用场景

位置固定,不会随着页面滚动而滚动

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    /* 元素居中 */.leimu{position: fixed;background-color: aquamarine;height: 100px;width: 100px;left: 1300px;top: 200px;}  </style>
</head>
<body style="margin: 0;"><div style="height: 8000px;background-color: rebeccapurple;"><div class="leimu"></div></div>
</body>
</html>

 效果:

1690381934359

 

好了以上就是今天的全部内容了,我们下一期再见!

分享一张壁纸:

 

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

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

相关文章

rust 闭包函数

函数有自己的类型&#xff0c;可以像使用基础类型一样使用函数&#xff0c;包括将函数保存在变量中、保存在 vec 中、声明在结构体成员字段中。闭包函数也是函数&#xff0c;也有自己的类型定义。不过&#xff0c;函数实际上是指针类型&#xff0c;在 rust 所有权中属于借用的关…

Tomcat修改端口号

网上的教程都比较老&#xff0c;今天用tomcat9.0记录一下 conf文件夹下server.xml文件 刚开始改了打红叉的地方&#xff0c;发现没用&#xff0c;改了上面那行

SpringBoot百货超市商城系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot框架开发的百货超市系统。首先&#xff0c;这是一个很适合SpringBoot初学者学习的项目&#xff0c;代…

Beyond Compare和git merge、git rebase

文章目录 各个分支线将dev1 rebase进 dev2将dev1 merge进dev2 各个分支线 将dev1 rebase进 dev2 gitTest (dev2)]$ git rebase dev1local: 是rebase的分支dev1remote&#xff1a;是当前的分支dev2base&#xff1a;两个分支的最近一个父节点 将dev1 merge进dev2 gitTest (dev…

json-server创建静态服务器2

上次写的 nodejs创建静态服务器 这次再来个v2.0 利用json-server很方便就可以实现。 vscode打开文件夹&#xff0c;文件夹所在终端&#xff1a; json-server.cmd --watch db.json 这里视频教程是没有上述命令标红的&#xff0c;但是会报错&#xff0c;具体不详&#xff0c…

uniapp小程序自定义loding,通过状态管理配置全局使用

一、在项目中创建loding组件 在uniapp的components文件夹下创建loding组件&#xff0c;如图&#xff1a; 示例代码&#xff1a; <template><view class"loginLoading"><image src"../../static/loading.gif" class"loading-img&q…

SpringBoot环境标识设置及nacos匹配配置

本地环境标识设置 本地父类maven配置 可以看到相关的分类&#xff0c;设置环境标识主要需要用到profiles; <profiles><profile><id>dev</id><properties><!-- 环境标识&#xff0c;需要与配置文件的名称相对应 --><profiles.active&…

用html+javascript打造公文一键排版系统9:主送机关排版

一、主送机关的规定 公文一般在标题和正文之间还有主送机关&#xff0c;相关规定为&#xff1a; 主送机关 编排于标题下空一行位置&#xff0c;居左顶格&#xff0c;回行时仍顶格&#xff0c;最后一个机关名称后标全角冒号。如主送机关名称过多导致公文首页不能显示正文时&…

c刷题(一)

目录 1.输出100以内3的倍数 2.将3个数从大到小输出 3.打印100~200素数 方法一 方法二 4.显示printf的返回值 最大公约数 试除法 辗转相除法 九九乘法表 求十个数的最大值 1.输出100以内3的倍数 法一&#xff1a; int n 0; while (n*3 < 100){printf("%d &q…

基于物联网、视频监控与AI视觉技术的智慧电厂项目智能化改造方案

一、项目背景 现阶段&#xff0c;电力行业很多企业都在部署摄像头对电力巡检现场状况进行远程监控&#xff0c;但是存在人工查看费时、疲劳、出现问题无法第一时间发现等管理弊端&#xff0c;而且安全事件主要依靠人工经验判断分析、管控&#xff0c;效率十分低下。 为解决上述…

基于双 STM32+FPGA 的桌面数控车床控制系统设计

桌 面数控 设 备 对 小 尺寸零件加工在成 本 、 功 耗 和 占 地 面 积等方 面有 着 巨 大 优 势 。 桌 面数控 设 备 大致 有 3 种 实 现 方 案 : 第 一种 为 微 型 机 床搭 配 传统 数控系 统 &#xff0c; 但 是 桌 面数控 设 备 对 成 本 敏感 ; 第二 种 为 基 于 PC…

使用Flutter的image_picker插件实现设备的相册的访问和拍照

文章目录 需求描述Flutter插件image_picker的介绍使用步骤1、添加依赖2、导入 例子完整的代码效果 总结 需求描述 在应用开发时&#xff0c;我们有很多场景要使用到更换图片的功能&#xff0c;即将原本的图像替换设置成其他的图像&#xff0c;从设备的相册或相机中选择图片或拍…

使用serverless实现从oss下载文件并压缩

公司之前开发一个网盘系统, 可以上传文件, 打包压缩下载文件, 但是在处理大文件的时候, 服务器遇到了性能问题, 主要是这个项目是单机部署.......(离谱), 然后带宽只有100M, 现在用户比之前多很多, 然后所有人的压缩下载请求都给到这一台服务器了, 比如多个人下载的时候带宽问…

tensorRT多batch动态推理

tensorRT的多batch推理&#xff0c;导出的onnx模型必须是动态batch&#xff0c;只需在导出的时候&#xff0c;设置一个dynamic_axis参数即可。 torch.onnx.export(hybrik_model, dummy_input, "./best_model.onnx", verboseTrue, input_namesinput_names, \output_…

计算机基本硬件的内部结构

1.早期冯诺依曼机结构 世界上第一台计算机ENIAC是使用手动接线来控制计算&#xff0c;十分麻烦。 冯诺依曼提出“存储程序”的概念&#xff0c;是指将指令以二进制代码的形式事先输入计算机的主存储器&#xff08;内存&#xff09;&#xff0c;然后按照其在存储器中的首地址执…

c++ ,vs2019, cpp20规范之 forward_list 源码分析

通过阅读源码可知&#xff0c;该单向链表不像list双向链表那样有专门的前导节点。即list._Mypair._Myval2._head._next才指向第一个有效数据节点。而 forward_list ._Mypair._Myval2._head 已经指向了有效数据节点。原因就在于复杂巧妙的类型转换。如下图的构造函数里&#xff…

Spring-ApplictionContext

Spring Spring是整个Java体系最核心的框架&#xff0c;没有之一。 核心类图结构 ApplicationContext ApplicationEventPublisher&#xff1a;提供了一种机制&#xff0c;用于通知应用程序中感兴趣的部分有关其执行过程中发生的特定事件。ListableBeanFactory&#xff1a;是S…

python结合tesseract-ocr识别汉字的训练库过程

一、安装python 例如&#xff0c;安装路径为&#xff1a;C:\rtkapp\python-3.8.0 二、安装opencv 三、安装tesseract-ocr 安装完成后&#xff0c;在系统环境变量path中&#xff0c;添加安装路径C:\rtkapp\Tesseract-OCR 四、打开python安装pytesseract 五、安装java运行环境…

测试开源C#人脸识别模块ViewFaceCore(5:质量检测和眼睛状态检测)

ViewFaceCore模块中的FaceQuality支持预测人脸质量&#xff0c;最初以为是预测人体体重&#xff0c;实际测试过程中才发现是评估人脸图片质量&#xff0c;主要调用Detect函数执行图片质量检测操作&#xff0c;其函数原型如下所示&#xff1a; //// 摘要:// 人脸质量评估///…

webstorm配置less转译

Program中路径如果识别不到 项目文件\node_modules.bin\lessc