【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
2023-06-13 09:18:38 时间
一、绝对定位特点
绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ;
如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ;
绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ;
这里与相对定位进行对比 , 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ;
相对定位 是 不脱标 的 , 原来的位置还会进行保留 ;
二、相对定位不脱标示例
相对定位 , 会保留盒子的原始位置 , 如果有其它标准流盒子在后面 , 会在 相对定位 的 盒子原始位置的 基础上进行排列 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
.father {
/* 父容器盒子 */
width: 400px;
height: 400px;
background-color: pink;
/* 设置 100 像素外边距 */
margin: 100px;
/* 为父容器添加相对定位 */
position: relative;
}
.son {
/* 子容器盒子 */
width: 150px;
height: 150px;
background-color: blue;
/* 相对定位 */
position: relative;
/* 顶部偏移量 50 像素 */
top: 50px;
/* 左侧偏移量 50 像素 */
left: 50px;
}
.son2 {
/* 子容器盒子 */
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
</html>
执行结果 : 蓝色的盒子是 相对定位 的元素 , 红色盒子是标准流元素 , 标准流元素会在 相对定位元素原坐标的基础上进行排列 ;
三、绝对定位脱标示例
绝对定位 会 脱离标准流 , 后续的标准流元素会忽略掉绝对定位的元素 ,
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
.father {
/* 父容器盒子 */
width: 400px;
height: 400px;
background-color: pink;
/* 设置 100 像素外边距 */
margin: 100px;
/* 为父容器添加相对定位 */
position: relative;
}
.son {
/* 子容器盒子 */
width: 150px;
height: 150px;
background-color: blue;
/* 绝对定位 */
position: absolute;
/* 顶部偏移量 50 像素 */
top: 50px;
/* 左侧偏移量 50 像素 */
left: 50px;
}
.son2 {
/* 子容器盒子 */
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
</html>
展示效果 : 下面的 蓝色盒子 是绝对定位元素 , 该元素脱离标准流 , 下方的红色盒子是标准流元素 , 直接放置在父盒子左上角 ;
相关文章
- Windows 用来定位 DLL 的搜索路径
- Div滚动条定位设置「建议收藏」
- CSS媒体查询_css网页
- CSS 换行_css不允许换行
- 【原创】CSS中定位
- 你所不知道的测试经验分享之安卓UI控件定位!
- 软件测试|selenium css定位
- 开发板测试手册——USB 4G 模块、GPS 定位功能操作步骤详解(3)
- 基于多传感器融合的定位和建图系统
- 【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )
- CSS-绝对、相对、固定定位三者区别
- 【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
- 【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )
- 微信小程序判断手机有没有定位的方法详解手机开发
- linux系统下实时监控进程以及定位杀死挂起的进程详解程序员
- 深入探究MySQL定位慢查询的方法(mysql定位慢查询)
- Linux文件扫描:精准定位潜在问题(linux文件扫描)
- 快速定位Linux文件末尾(linux到文件末尾)
- MySQL 中定位符的重要性(mysql定位符)
- Linux文件绝对路径:从定位到达终点(linux文件绝对路径)
- CSS 定位样式
- CSS与MySQL合力提升网页性能(css与mysql结合)
- Oracle产品解决方案的有效定位(oracle产品定位)
- Oracle CBC定位精准定位至数据库核心(oracle cbc定位)
- js鼠标滑过弹出层的定位IE6bug解决办法
- ThinkPHP使用UTFWry地址库进行IP定位实例