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 ...
随机推荐
- SQL学习笔记之B+树的几点总结
本文主要以列表形式将B+树的特点以及注意点等列出来,主要参考<算法导论>.维基百科.各大博客的内容,结合自己的理解写的,如内容有不当之处,请各位雅正. 0x00 前言 B树是为磁盘或其他直 ...
- Kafka学习之（一）了解一下Kafka及关键概念和处理机制
Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模小打的网站中所有动作流数据.优势 高吞吐量:非常普通的硬件Kafka也可以支持每秒100W的消息,即使在非常廉价的商用机器上也能做 ...
- 转载：vsftp中的local_umask和anon_umask
转载出处:http://blog.sina.com.cn/s/blog_67c5699001010e3e.html umask是unix操作系统的概念,umask决定目录和文件被创建时得到的初始权限u ...
- 20145322《Java程序设计》第3次实验报告
实验内容,, 组队使用 git 上传代码并且互相下载对方代码修改之后再上传. 实现代码的重载 一. 使用git 上传代码 过程如图: 仨人成功上传后的代码图如下: 使用git 相互更改代码 执行git ...
- z-albert之开启博文之路
其实注册博客园已经蛮久的了,一直都只是停留在看,却没有自己动手一篇属于自己的技术博文.之所以以前一直没写,以前没有工作,一直都是小白.然而今天为什么感写了呢,并不是自己比以前懂得多多少,而是希望将自己 ...
- CentOS7安装GNOME可视化界面
1.首先安装X(X Window System),命令为 yum groupinstall "X Window System" 回车(注意有引号) 1CentOS Linux系 ...
- C#中【正则表达式regular expression】相关的知识
Regex System.Text.RegularExpressions.Regex regex应该是regular expression的缩写 https://msdn.microsoft ...
- C语言之浅析网络包解析
1.这几天研究skynet中的 lua-netpack.c 中的解析数据包过程.于是把lua部分去掉,修改了一些接口,留下解包相关的代码.再结合云风写的网络代码的例子, 写了一个最简单形式的客户端封包 ...
- Spring Boot的自动配置的原理
Spring Boot在进行SpringApplication对象实例化时会加载META-INF/spring.factories文件,将该配置文件中的配置载入到Spring容器. 1.1.1. ...
- 1012: [JSOI2008]最大数maxnumber 线段树
https://www.lydsy.com/JudgeOnline/problem.php?id=1012 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数 ...