理解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 零.世间的道 ...
随机推荐
- UVa123 - Searching Quickly
题目地址:点击打开链接 C++代码: #include <iostream> #include <set> #include <map> #include < ...
- Oracle- 正则表达式查询
发现Oracle支持正则表达式.先收藏. ORACLE中的支持正则表达式的函数主要有下面四个:1,REGEXP_LIKE :与LIKE的功能相似2,REGEXP_INSTR :与INSTR的功能相似3 ...
- oracle的commit
oracle的commit就是提交数据(释放锁),在未提交前你前面的操作更新的都是内存,没有更新到物理文件中.执行commit从用户角度讲就是更新到物理文件了,事实上commit时还没有写date f ...
- 按要求编写一个Java应用程序： （1）定义一个类，描述一个矩形，包含有长、宽两种属性，和计算面积方法。 （2）编写一个类，继承自矩形类，同时该类描述长方体，具有长、宽、高属性， 和计算体积的方法。 （3）编写一个测试类，对以上两个类进行测试，创建一个长方体，定义其长、 宽、高，输出其底面积和体积。
package jvxing; public class Jvxing { //成员变量 private double width; private double chang; public doub ...
- CocoaPods容易出现的问题；
一.初次安装cocoapods打开项目遇:Pods-resources.sh: Permission denied报错. 此类报错是指编译器在打开Pods-resources.sh文件的时候遭遇权限问 ...
- 传微软欲收购Xamarin：未来有望通过VS开发iOS和Android应用？
据CRN报道,其援引匿名人士的消息称,微软将收购一家创建C#移动应用工具的公司或进行注资,并且谈判已经到了最终阶段.这家公司的名字叫做Xamarin,创建于2011年.对于微软来说,收购Xamarin ...
- Ext.Net 问题收集
Ext.Net DateField只显示年月 <ext:DateField runat="server" Format="yyyy-MM"> < ...
- 使用apache common-io 监控文件变化--转
package common.io; import org.apache.commons.io.filefilter.FileFilterUtils; import org.apache.common ...
- android.os.NetworkOnMainThreadException 异常处理
当我试图在UI线程(MainActivity)连接网络的时候,运行时抛出异常droid.os.NetworkOnMainThreadException 安卓的官方文档说 The exception t ...
- 我的第一篇——nginx+naxsi总结篇1
今天是我正式在Linux下安装nginx的第一天吧,搜索,查看,安装,这之间肯定是或多或少的遇到了很多的问题,不管是大的还是小的,都应该记录下来,或许以后还会用到,或许会帮到其他人. 首先,先说一下, ...