理解css 中的position五个属性
在实际开发页面布局时，运用position，对定位的块级元素的嵌套的效果总是不太理解，这里做了几个测试
一般的在w3c中我们可以很容易的获取定义:
static ： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit ：规定应该从父元素继承 position 属性的值。
absolute : 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative : 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
总的来说 ：
static呢，就是正常的文档流顺序，默认的，相当于没有定位!
fixed呢， 就是相对于浏览器窗口，就是你滚动条怎么滚动，他还是那个位置，就想是 “粘” 在窗口上了!
inherit呢， 就是从父元素继承 position 属性的值，
absolute呢，是脱离文档流的原来的位置是不继续占据了，如果他的父级元素中有已经定位了的不管是absolute的还是relative，它都会相对于他的父级元素来定位，如果他的父级元素中没有定位了的那么它就是相对于body来定位的。也就是说absolute的绝对是有参照物的！
relative呢，是不会脱离文档流的原来的位置也就继续占据了，它是只相对于自身原来的位置来定位的!
前三个是很容易理解的，对于absolute和relative的结合使用，做了几个测试
测试（absolute和relative）
1.单独的absolute和relative
2.relative中的relative，absolute中的relative
3.absolute中的absolute，relative中的absolute
<!DOCTYPE html>
<html>
<head>
<title>position -- absolute -- relative</title>
</head>
<style> .test-a{
position: absolute;
top:20px;
left:60px;
width:200px;
height: 100px;
background: red;
}
.test{
width:400px;
height: 100px;
background: green;
}
.test-r{
position:relative;
top:50px;
left:130px;
background: yellow;
width:160px;
height: 180px;
} .test-rr{
position: relative;
top: 20px;
left: 100px;
width: 600px;
height: 300px;
background: blue;
}
.test-aa{
position: absolute;
top: 24px;
left: 34px;
background: orange;
}
.test-aaa{
position: absolute;
top: 24px;
left: 34px;
width:400px;
height:200px;
background: #18E457;
}
.test-aaaa{
position: absolute;
top: 124px;
left: 134px;
width:400px;
height:200px;
background: yellow;
}
.test-rrr{
position: relative;
top: 24px;
left: 34px;
width:400px;
height:200px;
background: yellow;
}
.test-rrr{
position: relative;
top: 124px;
left: 134px;
width:400px;
height:200px;
background: red;
}
.test-r-a{
position: absolute;
top: 124px;
left: 134px;
width:800px;
height:800px;
background: yellow;
}
.test-a-r{
position: relative;
top: 124px;
left: 134px;
width:700px;
height:700px;
background: red;
}
</style>
<body>
<div class="test-a">absolute</div>
<div class="test">分割</div>
<div class="test-r">relative</div> <h2 >结合使用</h2>
<p>parentNode的position不是relative或absolute,那absolute的绝对对象是针对body的
parentNode的position 是relative或absolute,那absolute的绝对对象是针对parentNode的
也就是说absolute的绝对是有参照Node的 </p> <div class="test-rr">
absolute外的relative
<div class="test-aa">
relative内的absolute，，，里面这个div是相对外面那个div定位的
</div>
</div> <div class="test-aaa">
absolute外的absolute
<div class="test-aaaa">
absolute内的absolute,,,,,,,,里面这个div是相对外面那个div定位的
</div>
</div> <div class="test-rrr" >
relative外的relative
<div class="test-rrrr">
relative内的relative,,,,,,,,里面这个div是相对原来位置定位的
</div>
</div> <div class="test-r-a">
relative外的absolute
<div class="test"> <div class="test-a-r">
relative内的absolute，，，里面这个div是相对原来位置定位的
</div>
</div>
</div> </body>
</html>
其实很多时候，网上的经验，很多很杂，自己实践一下，才能自己真正理解
理解css 中的position五个属性的更多相关文章
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 装载：对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- css详解position五种属性用法及其含义
position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
随机推荐
- （原创）vagrant up 异常报错，出现 There was an error while executing `VBoxManage` 的解决方法
最近在使用 vagrant homestead 时,不小心在虚拟机上使用了 exit 命令退出虚拟机,导致再使用 vagrant up 时出现以下错误: Bringing machine 'larav ...
- 继承BaseAdapter实现Filterable的adapter类完整示例
转载:http://www.lai18.com/content/1631130.html 目标:自定义ListView项布局通常需要自己实现Adapter,并通过搜索关键字筛选部分数据.且关键字变长变 ...
- Ios学习
http://www.cnblogs.com/superhappy/archive/2013/04/23/3038493.html http://www.360doc.com/content/14/0 ...
- NPOI导出Excel示例
摘要:使用开源程序NPOI导出Excel示例.NPOI首页地址:http://npoi.codeplex.com/,NPOI示例博客:http://tonyqus.sinaapp.com/. 示例编写 ...
- JS 函数调用
Js函数调用的方式有如下几种情况: (1)具名函数直接调用 function foo() { } foo(); (2)匿名函数通过引用来调用 fooRef = function() { } fooRe ...
- java 对视频和图片进行加密解密
import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java. ...
- HBase 和 MongoDB在设计上的区别
转载:http://leongfans.iteye.com/blog/1019383 昨天搜一下mongodb的资料,介绍应用的比较多,原理介绍的不多. 粗略得看了一下,总体来说两者的设计思路差不多, ...
- cocos2d-x 判断系统语言
转自:http://blog.csdn.net/tangaowen/article/details/8878193 //default language is local language ccLan ...
- C 队列顺序存储
#ifndef __MY_SEQLIST_H__ #define __MY_SEQLIST_H__ typedef void SeqList; typedef void SeqListNode; // ...
- log_slave_updates在线修改
http://planet.mysql.com/entry/?id=20450 mysql> show variables like 'log_slave_updates'; +-------- ...