css 中相对定位和绝对定位
1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位
2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置
相对定位:
相对于自身原有位置(就是普通流的时候)进行偏移(设置top, left...后)
仍然处于标准文档流中
随即拥有偏移属性和z-index属性
绝对定位:
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
3. 先上示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.class1 {
height: 100px;
background-color: blue
}
.class2 {
position:relative; /*去掉后子元素会以html为参照物*/
height: 50px;
background-color: green;
}
.class3 {
height: 80px;
background-color: red;
}
.child {
height: 20;
position:absolute;
top: 10px;
left: 30px;
background-color:gold;
}
</style>
</head>
<body>
<div class="class1"></div>
<div class="class2">
<div class="child">
Jason Zeng
</div>
</div>
<div class="class3"></div>
</body>
</html>
祖先元素设置了定位
.class2 {
position:relative; /*去掉后子元素会以html为参照物*/
height: 50px;
background-color: green;
}
祖先元素没有设置定位
.class2 {
height: 50px;
background-color: green;
}
4.总结: 绝对定位时偏移参考物:
无已定位的祖先元素(包裹它的所有层都没有设置position属性): 以<html>为偏移参照物
有已定位的祖先元素: 以距其最近的已定位的祖先元素为偏移参照基准
css 中相对定位和绝对定位的更多相关文章
- CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...
- css中相对定位和绝对定位
相对定位: #box_relative { position: relative; left: 30px; top: 20px; } 绝对定位: #box_relative { position: a ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- Web—12-详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- 详解CSS的相对定位和绝对定位（讲得很详细）
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- 详细讲解CSS中相对定位relative和绝对定位absolute
很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...
- h5整理--详解css的相对定位和绝对定位
浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
随机推荐
- linux配置Nginx启动，停止
Nginx 启动.重启.停止脚本 第一步 先运行命令关闭nginx sudo kill `cat /usr/local/nginx/logs/nginx.pid` 第二步 vi /etc/in ...
- 【MSDN_C#】C#版本介绍
C# 1,Visual Studio .NET 2002 首次发布 C# 1.1,Visual Studio .NET 2003 #line 杂注和 xml 文档注释 C# 2,Visual Stud ...
- PHP 实现归并排序算法
算法原理 原理: 利用递归,先拆分.后合并.再排序. 步骤: 均分数列为两个子数列 递归重复上一步骤,直到子数列只有一个元素 父数列合并两个子数列并排序,递归返回数列 代码实现 // 归并排序主程序 ...
- centos 最新版git 致命错误： zlib.h：没有那个文件或目录
遇到此类问题通常是缺少对应的库文件. 由于yum install是老版本的git 还是1.8的 如果需要安装新版本的git,官方给出的url:https://git-scm.com/download/ ...
- Hadoop资源调度器
hadoop调度器的作用是将系统中空闲的资源按一定策略分配给作业.调度器是一个可插拔的模块,用户可以根据自己的实际应用要求设计调度器.Hadoop中常见的调度器有三种,分别为: 1.基于队列的FIFO ...
- Hive-0.13安装
Hive只需在使用节点安装即可. 1.上传tar包.解压 tar -zxvf apache-hive-0.13.0-bin.tar.gz -C /hadoop/ 配置HIVE_HOME环境变量 ...
- linux下nano中复制粘贴剪切的快捷键是什么
答: 1.复制:alt+6 2.剪切:ctrl+k 3.粘贴:ctrl+u 4.自由剪切: ctrl+6指定起始剪切位置,按上下左右键来选中内容,然后按下ctrl+k即可自由剪切 5.撤销: alt+ ...
- uboot下如何查看内存里的数据
答:使用md工具 md.b $address $count (从地址$address处显示$count个字节的数据,b=byte,8位) md.w $address $count (从地址$addre ...
- win7打开ftp步骤
FTP是很方便文件传输的功能 打开ftp xftp连接 传输测试 如果连接不通的话,有可能是防火墙的问题
- 09_MySQL DQL_SQL99标准中的多表查询（外连接）
# 二.外连接/* 场景:查询值在1个表中出现,在另外1个表中没有出现 特点: 0.也是两张表的字段拼接,分为主表和从表 1.外连接的结果,将显示主表中的所有记录行 如果连接字段在从表中有记录,则显示 ...