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 ...
随机推荐
- js正则匹配两位小数
今天写一个用js正则校验最多保留两位小数的格式. a = /^\d+|\d+\.\d{1,2}$/; 测试 a.test(1.222); 结果:true 一下蒙了,怎么可能,最后找了好久,原来需要把^ ...
- Centos 7 关闭邮件服务及禁用IPv6
关闭邮件服务(禁用25端口) sudo systemctl stop dovecot sudo systemctl stop postfix sudo systemctl disable doveco ...
- Matlab绘图基础——colormap在数字图像处理及三维图形展示上的应用（分层设色）
色图(color map)是MATLAB系统引入的概念.在MATLAB中,每个图形窗口只能有一个色图. 色图是m×3 的数值矩阵,它的每一行是RGB三元组.色图矩阵可以人为地生成 ...
- Student : IComparable<Student> 以及逆变和协变
IComparable<Student>是Student的父类,所以IComparable<Student>可以接收Student.但是在使用CompareTo方法的时候,必须 ...
- 计算java对象的内存占用
代码引用自:https://blog.csdn.net/antony9118/article/details/54317637 感谢博主分享: import java.util.ArrayList; ...
- 第四篇：Spark SQL Catalyst源码分析之TreeNode Library
/** Spark SQL源码分析系列文章*/ 前几篇文章介绍了Spark SQL的Catalyst的核心运行流程.SqlParser,和Analyzer,本来打算直接写Optimizer的,但是发现 ...
- Windows下实现mysql定时备份
1.写MySQL备份bat处理 @echo off set "yMd=%date:~,4%%date:~5,2%%date:~8,2%" set "hms=%time:~ ...
- 链表中的倒数第k个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点. 基本思想:定义两个指针a,b分别指向头节点, a指针先向前走k-1步(注意:因为倒数节点是从倒数第一个结点开始的,而不是零),然后a指针和b指 ...
- [转载]在sublime中运行Java代码
1.设置java的PATH环境变量 2.创建批处理或Shell脚本文件 runJava.bat: 将该文件复制到JDK的bin目录下. @echo off cd %~dp1 echo Compilin ...
- TCP_DB_中间件_遗留问题
1.一些经验 1.1.Delphi客户端中 Block的socket,使用 读取超时的话,会有大约1秒的时间等待...很影响使用体验...于是 放弃超时读取的方式,改为 在每次读取到TCP数据包时 都 ...