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的更多相关文章
随机推荐
- ASP.NET 5 & MVC6系列教程
本系列的大部分内容来自于微软源码的阅读和网络,大部分测试代码都是基于VS RC版本进行测试的. 解读ASP.NET 5 & MVC6系列(1):ASP.NET 5简介 解读ASP.NET 5 ...
- 【转】每天一个linux命令（44）：top命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/24/2831353.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进 ...
- POJ1191棋盘分割
题目:http://poj.org/problem?id=1191 1.分析式子!!! 发现xba是定值,σ的大小仅和∑ xi^2 有关.故dp条件是平方和最小. 2.分出一块就像割掉一条,只需枚举从 ...
- Angular 4 绑定
一.事件绑定 1. 创建doOnClick函数 2. 网页中绑定doOnClick方法 3. 效果图 二. 属性绑定 1. 定义imgUrl的网址 2. 定义img src属性 另外一种写法 3. ...
- VS起始页不显示最近使用的项目解决方案
前段时间换了一家公司,做ASP.NET开发,让我郁闷的是VS的起始页总是不显示最近使用项目,起先没在意,后来觉得越来越不方便了,然后本着内事不决问百度,外事不决问谷歌的态度,我就百了下~,结果还真遇到 ...
- ALGO-3_蓝桥杯_算法训练_K好数(DP)
问题描述 如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K进制数中K好数的数目.例如K = ,L = 2的时候,所有K好数为11...... 共7个 ...
- bzoj 3795: 魏总刷DP
Description 魏总,也就是DP魏又开始刷DP了.一共有n道题,第i道题魏总原本需要u[i]秒的时间.不过,为了表达对这些水题的藐视,魏总决定先睡k秒再开始刷题.魏总并不清楚自己会睡多久,只知 ...
- [转]Java 运算符的优先级
Java 运算符的优先级(从高到低) 优先级 描述 运算符 1 括号 ().[] 2 正负号 +.- 3 自增自减,非 ++.--.! 4 乘除,取余 *./.% 5 加减 +.- 6 移位运算 &l ...
- 9-16Jenkins-1第一个任务
jenkins安装搭建 #mac安装jenkins brew install jenkins #或下载war包 java -jar jenkins.war 第一个jenkins任务 创建一个自由风格的 ...
- 邮件服务器fixpost服务（1）
发邮件所用的协议,SMTP协议,端口TCP25 收邮件所用的协议,pop3.imap协议 邮件客户端(MUA):foxmail.闪电邮.邮件大师.outlook 搭建邮件服务器所用到的软件(MTA邮件 ...