理解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 零.世间的道 ...
随机推荐
- iOS几个效果动画-------------------(实例详讲)qq粘性效果
这几天做了一些简单iOS的效果图,感觉苹果官方已经帮我们做了很多了,我们只是站在巨人的肩膀上编程,这些也没什么难的,最难的也就是用到了初中的三角函数,先让大家看看这几个动画吧.先列这几个把,由上而下分 ...
- Idea的Git使用
在使用Git来pull和push代码的时候会发生冲突的情况,如果处理不当则会出现无法pull和push代码的情况.所以这个是十分有必要注意的. 那么我来说几句自己的总结吧: 1.先看下idea的Git ...
- React-native 中的触摸响应功能
我们在做APP的时候,与桌面应用系统不同的是触摸响应. web页面对触摸响应的支持和原生的APP有着很大的差异. 基本用法 componentWillMount: function() { this. ...
- css3动画属性中的transition属性
一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...
- Asp.Net事务和异常处理：
Asp.Net事务和异常处理: 一.什么是事务处理? 事务处理是一组组和成逻辑工作单元的数据库操作,虽然系统中可能会出错,但事务将控制和维护每个数据库的一致性和完整性. 如果在事务过程中没有遇到错误, ...
- SCSS loader effect
p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 几天来看一组利用SCSS实现的loader effect(载入效果).鼓舞大家自行动手实现,当然也 ...
- C++ 外部调用private方法
1.思考,对于C++,能不能在外部调用私有方法? 2.在Java中,子类继承不能缩小父类成员的访问权限.因为在Java中,继承只是表示Is-A关系,因此,父类提供的接口,子类必须承诺仍然提供,不能缩小 ...
- iOS开发笔记系列-基础4(变量与数据类型)
对象的初始化 对象的初始化方法一般都如下: -(id)init { self=[super init]; if(self){ ... } return self; } 这个方法首先会调用父类的初始化方 ...
- android学习日记02--Activity简介
一.Activity活动 学习Android,第一个都会接触Activity滴,Activity表示一个用户界面,是Android应用程序的入口,可以同时有多个界面,但只会显示栈顶的界面. Activ ...
- 基于反射实现自己主动化restful开发
[Author]: kwu 基于反射实现自己主动化restful开发,通用的仅仅须要写查询数据库的sql.并增加相应的javabean实现的高速restful服务的开发. 1.编写数据库的查询sql. ...