CSS position属性之relative和absolute

目录

  • 1 参考文章
  • 2 五个属性值
  • 3 position:static
  • 4 position:relative(相对)
  • 5 position:absolute(绝对)

1 参考文章

https://blog.csdn.net/lalala_dxf/article/details/123566909
https://blog.csdn.net/WangMinGirl/article/details/108648533

2 五个属性值

position 属性用来指定一个元素在网页上的位置,一共有5种定位方式,也就是说 position 属性主要有五个属性值。如下:

属性值含义
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘性定位

3 position:static

  • static 是 position 属性的默认值。如果省略 position属性,浏览器就认为该元素是 static定位。
  • 浏览器会按照代码的顺序,决定每个元素的位置,这称为"正常的文档流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。
  • static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right、 z-index这五个属性无效。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css" />
</head>
<body>bodybody<div class="box"><div class="same one">one</div><div class="same two">two</div><div class="same three">three</div></div>
</body>
</html>
.box{width:200px;border:5px solid black;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;
}
.box>.three{background:burlywood;
}

在这里插入图片描述

4 position:relative(相对)

偏移参考是元素本身原来的位置(static),不会使元素脱离文档流。
搭配top、bottom、left、right这四个属性使用,来设置偏移的方向和距离。left 和 right 不能一起设置,top 和 bottom 不能一起设置。不推荐和margin一起使用。
设置了相对定位的元素不管它是否进行移动,元素仍然占据它原来的位置。不会对其余内容进行调整来适应元素留下的任何空间。
移动元素可能会导致它覆盖其他的元素。
相对定位元素常常作为绝对定位元素的父元素。
层级关系默认规则:定位元素会覆盖在普通元素的上面;都设置定位的两个元素,后写的元素会覆盖在先写的元素上面。

在.box>.two增加
position: relative;
top: 40px;
left: 40px;

.box{width:200px;border:5px solid black;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;position: relative;top: 40px;left: 40px;
}
.box>.three{background:burlywood;
}

在这里插入图片描述
在这里插入图片描述

5 position:absolute(绝对)

默认以body节点作为参考点,如果祖先元素也是定位流(relative/absolute/fixed), 那么以定位流的祖先元素作为参考点。
绝对定位的元素会脱离普通流。
搭配top、bottom、left、right这四个属性使用,left和right不能一起设置,top和bottom不能一起设置。不推荐和margin一起使用。
子绝父相:如果想要子元素定位于父元素的某个位置,子元素用绝对定位, 父元素用相对定位

.box>.two的position属性改成 absolute;

.box{width:200px;border:5px solid black;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;position: absolute;top: 15px;left: 50px;
}
.box>.three{background:burlywood;
}

在这里插入图片描述
在这里插入图片描述

为.box>.two的祖先元素.box增加position: relative;属性(子绝父相)

.box{width:200px;border:5px solid black;position: relative;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;position: absolute;top: 15px;left: 50px;
}
.box>.three{background:burlywood;
}

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

最灵活且易用的C++开源串口通信调试软件

这款C开源串口调试软件&#xff0c;集成了丰富的功能&#xff0c;为用户提供高效、便捷的串口通信调试体验。以下是其核心功能亮点&#xff1a; 基础功能&#xff1a; 数据交互自如&#xff1a;支持串口数据的轻松读取与发送&#xff0c;让数据交换变得简单直接。 灵活配置参…

基于顺序表的通讯录实现

一、前言 基于已经学过的顺序表&#xff0c;可以实现一个简单的通讯录。 二、通讯录相关头文件 //Contact.h #pragma once#define NAME_MAX 20 #define TEL_MAX 20 #define ADDR_MAX 20 #define GENDER_MAX 20typedef struct PersonInfo {char name[NAME_MAX];char gender[G…

Python的招聘数据分析与可视化管理系统-计算机毕业设计源码55218

摘要 随着互联网的迅速发展&#xff0c;招聘数据在规模和复杂性上呈现爆炸式增长&#xff0c;对数据的深入分析和有效可视化成为招聘决策和招聘管理的重要手段。本论文旨在构建一个基于Python的招聘数据分析与可视化管理系统。 该平台以主流招聘平台为数据源&#xff0c;利用Py…

昇思25天学习打卡营第2天|MindSpore快速入门

打卡 目录 打卡 快速入门案例&#xff1a;minist图像数据识别任务 案例任务说明 流程 1 加载并处理数据集 2 模型网络构建与定义 3 模型约束定义 4 模型训练 5 模型保存 6 模型推理 相关参考文档入门理解 MindSpore数据处理引擎 模型网络参数初始化 模型优化器 …

如何选择TikTok菲律宾直播网络?

为了满足用户对于实时互动的需求&#xff0c;TikTok推出了直播功能&#xff0c;让用户能够与粉丝即时交流。本文将探讨如何选择适合的TikTok菲律宾直播网络&#xff0c;并分析OgLive是否是值得信赖的选择。 TikTok菲律宾直播网络面临的挑战 作为全球领先的短视频平台&#xff…

Python + OpenCV 开启图片、写入储存图片

这篇教学会介绍OpenCV 里imread()、imshow()、waitKey() 方法&#xff0c;透过这些方法&#xff0c;在电脑中使用不同的色彩模式开启图片并显示图片。 imread() 开启图片 使用imread() 方法&#xff0c;可以开启图片&#xff0c;imread() 有两个参数&#xff0c;第一个参数为档…

Google Play上架:恶意软件、移动垃圾软件和行为透明度详细解析和解决办法 (一)

近期整理了许多开发者的拒审邮件和内容,也发现了许多问题,今天来说一下关于恶意软件这类拒审的问题。 目标邮件如下: 首先说一下各位小伙伴留言私信的一个方法,提供你的拒审邮件和时间,尽可能的详细,这样会帮助我们的团队了解你们的问题,去帮助小伙伴么解决问题。由于前…

集成学习(一)Bagging

前边学习了&#xff1a;十大集成学习模型&#xff08;简单版&#xff09;-CSDN博客 Bagging又称为“装袋法”&#xff0c;它是所有集成学习方法当中最为著名、最为简单、也最为有效的操作之一。 在Bagging集成当中&#xff0c;我们并行建立多个弱评估器&#xff08;通常是决策…

排序——数据结构与算法 总结8

目录 8.1 排序相关概念 8.2 插入排序 8.2.1 直接插入排序&#xff1a; 8.2.2 折半插入排序&#xff1a; 8.2.3 希尔排序&#xff1a; 8.3 交换排序 8.3.1 冒泡排序&#xff1a; 8.3.2 快速排序&#xff1a; 8.4 选择排序 8.4.1 简单选择排序 8.4.2 堆排序 8.5 归并…

磁盘就是一个超大的Byte数组,操作系统是如何管理的?

磁盘在操作系统的维度看&#xff0c;就是一个“超大的Byte数组”。 那么操作系统是如何对这块“超大的Byte数组”做管理的呢&#xff1f; 我们知道在逻辑上&#xff0c;上帝说是用“文件”的概念来进行管理的。于是&#xff0c;便有了“文件系统”。那么&#xff0c;文件系统…

最新版情侣飞行棋dofm,已解锁高阶私密模式,单身狗务必绕道!(附深夜学习资源)

今天阿星要跟大家聊一款让阿星这个大老爷们儿面红耳赤的神奇游戏——情侣飞行棋。它的神奇之处就在于专为情侣设计&#xff0c;能让情侣之间感情迅速升温&#xff0c;但单身狗们请自觉绕道&#xff0c;不然后果自负哦&#xff01; 打开游戏&#xff0c;界面清新&#xff0c;操…

HTML5使用<progress>进度条、<meter>刻度条

1、<progress>进度条 定义进度信息使用的是 progress 标签。它表示一个任务的完成进度&#xff0c;这个进度可以是不确定的&#xff0c;只是表示进度正在进行&#xff0c;但是不清楚还有多少工作量没有完成&#xff0c;也可以用0到某个最大数字&#xff08;如&#xff1…

vs2022安装qt vs tool

1 缘由 由于工作的需要&#xff0c;要在vs2022上安装qt插件进行开发。依次安装qt&#xff0c;vs2022&#xff0c;在vs2022的扩展管理中安装qt vs tool。 2 遇到困难 问题来了&#xff0c;在qt vs tool的设置qt version中出现问题&#xff0c;设置msvc_64-bit时出现提示“invali…

西安石油大学 课程习题信息管理系统(数据库课设)

主要技术栈 Java Mysql SpringBoot Tomcat HTML CSS JavaScript 该课设必备环境配置教程&#xff1a;&#xff08;参考给出的链接和给出的关键链接&#xff09; JAVA课设必备环境配置 教程 JDK Tomcat配置 IDEA开发环境配置 项目部署参考视频 若依框架 链接数据库格式注…

【中项第三版】系统集成项目管理工程师 | 第 4 章 信息系统架构① | 4.1-4.2

前言 第4章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术相关的内容&#xff0c;学习要以教材为准。本章分值预计在4-5分。 目录 4.1 架构基础 4.1.1 指导思想 4.1.2 设计原则 4.1.3 建设目标 4.1.4 总体框架 4.2 系统架构 4.2.1 架构定义 4.…

Invoice OCR

Invoice OCR 发票识别 其他类型ORC&#xff1a; DIPS_YTPC OCR-CSDN博客

25款404网页源码(上)

25款404网页源码&#xff08;上&#xff09; 1部分源码 2部分源码 3部分源码 4部分源码 5部分源码 6部分源码 7部分源码 8部分源码 9部分源码 10部分源码 11部分源码 12部分源码 领取完整源码下期更新 1 部分源码 <!DOCTYPE html> <html><!-- 优选源码 gulang.…

数据结构基础--------【二叉树基础】

二叉树基础 二叉树是一种常见的数据结构&#xff0c;由节点组成&#xff0c;每个节点最多有两个子节点&#xff0c;左子节点和右子节点。二叉树可以用来表示许多实际问题&#xff0c;如计算机程序中的表达式、组织结构等。以下是一些二叉树的概念&#xff1a; 二叉树的深度&a…

Element-UI - el-table中自定义图片悬浮弹框 - 位置优化

该篇为前一篇“Element-UI - 解决el-table中图片悬浮被遮挡问题”的优化升级部分&#xff0c;解决当图片位于页面底部时&#xff0c;显示不全问题优化。 Vue.directive钩子函数已在上一篇中详细介绍&#xff0c;不清楚的朋友可以翻看上一篇&#xff0c; “Element-UI - 解决el-…

深入刨析Redis存储技术设计艺术(二)

三、Redis主存储 3.1、存储相关结构体 redisServer:服务器 server.h struct redisServer { /* General */ pid_t pid; /* Main process pid. */ pthread_t main_thread_id; /* Main thread id */ char *configfile; /* Absolut…