理解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 零.世间的道 ...
随机推荐
- Oracle- 存储过程和异常捕捉
这段时间晚上有时候去打打球,回家看看电视剧,日子一天天过…….学了点ORACLE存储过程基础,作一下备注,以便日后需查阅. 创建无参存储过程 create procedure p_myPro1 is ...
- 从Web借鉴UI设计
从Web借鉴UI设计 用户体验已经成为衡量应用软件质量的重要标准.在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限 ...
- SQL函数中的动态执行语句
一.为什么要使用动态执行语句? 由于在PL/SQL 块或者存储过程中只支持DML语句及控制流语句,并不支持DDL语句,所以Oracle动态执行语句便应允而生了.关于DDL与DML的区别,请参见:DDL ...
- windows7下硬盘安装ubuntu14.04
windows7 ubuntu1404双系统 准备软件 安装步骤 step 1 step 2 step 3 step 4 windows7 + ubuntu14.04双系统 准备软件 1)grub4d ...
- 安卓模拟器Android SDK Manager 无法获取SDK列表的解决办法
1.打开运行Android SDK Manager ,Tool菜单,选择Options,打开设置菜单,勾选“Force https://...sources to be fetched using h ...
- android116 轮播 viewPager实现
布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- mysql replication inside
http://keithlan.github.io/2015/07/16/mysql_replication_inside/
- careercup-中等难度 17.4
17.4 编写一个方法,找出两个数字中最大的那一个.不得使用if-else或其他比较运算符. 解法: 我们可以通过一步步的分析来将需要用到的if-else和比较操作符去掉: If a > b, ...
- windows下ftp上传下载和一些常用命令
先假设一个ftp地址 用户名 密码 FTP Server: home4u.at.china.com User: yepanghuang Password: abc123 打开windows的开始菜单, ...
- Linux学习之路：认识shell和bash
一.shell 计算机硬件的直接控制者是操作系统的内核(kernel),因为内核的重要性,所以作为用户的我们是无法直接操作内核的,所以我们需要shell调用应用程序或者双击打开安装的应用软件与内核之 ...