position_css
position：
定位，元素的定位与这五个属性相关。left,top,bottom,right,z-index
1. static （默认值）。没有定位，五个属性都不起作用。
2. inherit 继承父类定位，IE不支持
3. relative 相对的，即相对于元素的正常位置，五个属性都起作用。
<style type="text/css">
.div1{
padding:10px 0px;
width:200px;
height:50px;
background-color:green;
margin:5px;
}
.relativeTest{
width:300px;
position:relative;
left:10px;
top:-15px;
background-color:red;
z-index:-1;
}
</style>
</head>
<body>
<div class="div1">
zhangsan
</div>
<div class="relativeTest">lisi</div>
</body>
加入position:relative ，属性left和top的值就会参照相对于第一个div的最下端位置偏移。当偏移top负值则向上出现于第一个div重叠的现象。
这个时候就要设置 z-index:[数字],来设置上下关系。
relative虽然位置移动了，但原先的位置还是保留的，下一个元素不会侵占此部分。
4. fixed 即相对于屏幕的正常位置，五个属性都起作用。
这个position:fixed;指明五个属性相对于浏览器屏幕的位置。不会随着文档的移动而移动。因是浮动到屏幕的，因此就没有父元素一说，因此width:100%就不起作用，变为inner-block.
5. absolute 绝对定位 即相对于具有position为(absolute,relative,fixed的父级元素而言)的正常位置，五个属性都起作用。
absolute的绝对，指从当前元素往上查找第一个带有position为(absolute,relative，fixed）的元素作为包裹元素进行定位，找不到则以html为包裹元素。
因为有浮动性，因此width:100%将不起作用，以找到有position的父级元素为准。
题外： float:**;
float是相对于包裹的父级block元素而言，内部元素失去block，变为一个挨着一个，根据排列规则是left还是right的浮动元素，失去原有的位置。
后续的元素将占据当前元素的位置。因此需要通过clear:both，占据当前位置。
<style type="text/css">
.flo{
float:right;
padding:5px;
} .clear{
clear:both;
}
<style> <div class="aaa">
<div class="flo">1</div>
<div class="flo">2</div>
<div class="flo">3</div>
<div class="flo">4</div>
<div class="clear"></div>
</div>
<div>5666</div>
position_css的更多相关文章
随机推荐
- Eolinker API 接口文档神器
Eolinker API 接口文档神器 群里小伙伴推荐的,还没有去研究,先记下来. API文档管理.自动化测试.开发协作利器 正在为数万企业管理超过100万APIs,提高开发效率以及规范开发流程
- 【转】实战USB接口手机充电 看3.0/2.0谁更快
原文网址:http://mb.it168.com/a2012/0816/1385/000001385641_all.shtml [IT168 应用]当下,越来越多的电脑都已普及USB 3.0接口,新买 ...
- 【转】每天一个linux命令（59）：rcp命令
原文网址:http://www.cnblogs.com/peida/archive/2013/03/14/2958685.html rcp代表“remote file copy”(远程文件拷贝).该命 ...
- JVM 之：Class 类文件结构
类文件结构 Class 文件是一组以8位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在 Class 文件中,中间没有添加任何分隔符,这使得整个 Class 文件中存储的内容几乎全部都是 ...
- scala的hello world出现的问题
build出现: Error:scalac: Error: org.jetbrains.jps.incremental.scala.remote.ServerExceptionError compil ...
- 利用windows server 2012 R2的Hyper-V搭建多个虚拟机的 Dynamics CRM 环境知识点小结
一.需要掌握网络的知识,域真正的意义,防火墙等其他知识,这些知识我还需要加强,下面是我和同事的结果,不对的地方大家可以指出来,谢谢. 1.安装好的CRM2011环境,必须先打Update Rollup ...
- REST风格框架：从MVC到前后端分离***
摘要: 本人在前辈<从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)>一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并 ...
- 关于android setTextSize() 以及 px dip/dp sp的说明。。。。
Paint.setTextSize()单位为px,Android系统中,默认的单位是像素(px).也就是说,在没有明确说明的情况下,所有的大小设置都是以像素为单位.Paint.setTextSize传 ...
- python使用smtplib发送邮件
python要实现发送邮件的功能,需要使用smtplib库. 1. 过程大致如下: 1. 建立和SMTP邮件服务器的连接 # 默认端口25 smtp = smtplib.SMTP(host, port ...
- sikuli 安装
1 简介 官方介绍: Sikuli脚本自动化,你在屏幕上看到的任何东西.它使用图像识别,识别和控制GUI组件.这是有用的,当有一个GUI的内部或源代码的访问是不容易的. Sikuli(在墨西哥 ...