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的更多相关文章
随机推荐
- grandstack graphql 开发模型
当前grandstack 支持两类开发方式 js (使用Neo4j-graphql-js) 插件模型 js 模型 参考https://github.com/rongfengliang/grand-st ...
- oracle nodejs 访问
1. 下载node-oracle网址如下: https://github.com/joeferner/node-oracle 2. 测试代码: var oracle = require('oracle ...
- sql server 创建内联表值函数
表值函数就是返回table 的函数使用它可以方便的进行查询的处理 创建的代码如下: create FUNCTION returunclassfirstlist( -- Add the paramet ...
- ARP命令详解
ARP是一个重要的TCP/IP协议,并且用于确定对应IP地址的网卡物理地址.实用arp命令,我们能够查看本地计算机或另一台计算机的ARP高速缓存中的当前内容.此外,使用arp命令,也可以用人工方式输入 ...
- seleniumWebdriver浏览器驱动信息汇总
selenium是thoughtworks公司开发的一款开源的测试工具,主要用来做web端的自动化测试. Python安装selenium,直接使用执行pip install selenium(pyt ...
- nyoj 吃土豆
吃土豆 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 Bean-eating is an interesting game, everyone owns an M* ...
- button使用注意
<button type="button" class="btn btn-primary" onclick="ChangePassword(); ...
- Tomcat 8 中的startup.bat
1. bat文件 批处理文件,在DOS和Windows(任意版本)的系统中,bat文件是可执行文件 2. startup.bat 中涉及的bat语法 2.1 @. echo. echo off @ec ...
- WHEN STATICFILEHANDLER IS NOT STATICFILEHANDLER
I could also have called this "wildcard .NET mapping in IIS Express from web.config." I'm ...
- Javascript之类型检测（一）
js中有7种内置类型,这7种类型又分为2大类:基本数据类型和对象(object) 一.检测原始(基本数据:字符串.数字.布尔.null.undefined.symbol)类型. 用typeof检测原始 ...