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 ...
随机推荐
- bzoj 3657 斐波那契数列(fib.cpp/pas/c/in/out)
空间 512M 时限2s [题目描述] 有n个大于1的正整数a1,a2,…,an,我们知道斐波那契数列的递推式是f(i)=f(i-1)+f(i-2),现在我们修改这个递推式变为f(i)=f(i-1) ...
- Btrace使用入门
1.什么是BTrace BTrace是sun公司推出的一款Java 动态.安全追踪(监控)工具,可以在不用重启的情况下监控系统运行情况,方便的获取程序运行时的数据信息,如方法参数.返回值.全局变量和堆 ...
- git重命名分支名
git branch -m old_branch_name new_branch_name
- angularjs 整合bootstrap 时间控件
一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...
- 删除Rancher节点的正确姿势
在Rancher上疏散该节点 删除节点 登录该节点宿主机,删除rancher相关容器 docker rm -f -v $(docker ps -aq) 删除该节点的所有volume docker vo ...
- sprites.png雪碧图
长时间不用把精灵图怎么用给忘了... 一.PC端 给所用到精灵图的元素设置background:url(sprites.png路径); background-position: -x -y; 其中: ...
- 尽量不要使用using namespace std
C++标准程序库中的所有标识符都被定义于一个名为std的namespace中. namespace是指标识符的各种可见范围.命名空间用关键字namespace 来定义.命名空间是C++的一种机制,用来 ...
- Apache 配置SSL网站
1. 申请证书 现在可以在阿里云或七牛上申请免费的证书,这里以阿里云为例 进入阿里云证书申请界面 https://www.aliyun.com/product/cas ...
- 第五章 如何使用Burp Target
Burp Target 组件主要包含站点地图.目标域.Target 工具三部分组成,他们帮助渗透测试人员更好地了解目标应用的整体状况.当前的工作涉及哪些目标域.分析可能存在的攻击面等信息,下面我们就分 ...
- 1012: [JSOI2008]最大数maxnumber 线段树
https://www.lydsy.com/JudgeOnline/problem.php?id=1012 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数 ...