position属性
所有主流浏览器支持position属性;
任何版本的ie浏览器都不支持属性值“inherit”。
position属性规定元素的定位类型,任何元素都可以定位,不过绝对定位或固定元素会生成一个块级框,不论该元素本身是什么类型。相对定位元素相对与他在正常流中的默认位置偏移。
默认值:static,
值 描述
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
relative 生成相对定位的元素,相对于其正常位置进行定位。
static 默认值,没有定位,元素出现在正常的流中。
inherit 规定应该从父元素继承position属性的值。
1.设置元素的形状:
img {
position:absolute;
clip:rect(0px 50px 200px 0px);
}
<body>
<p>clip属性剪切了一幅图像:</p>
<p><img border="0" src="1.jpg" width="120" height="151"></p>
</body>
clip:rect(a b c d); clip是css2种的裁剪属性,用于裁剪绝对定位的元素,语法为:
clip:rect(top,roght,bottom,left)
2.Z-index
Z-index可被用于将一个元素放置于另一个元素之后。
令z-index=-1则会显示在另外元素的后面,
默认值为0,
img.x{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
position属性的更多相关文章
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- position属性的四个value
As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...
- 几种Position属性的用法
几种Position常见的属性就是一下几种: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.re ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
随机推荐
- VS2012编译出来的程序,在XP上运行,出现“.exe 不是有效的 win32 应用程序” “not a valid win32 application”
升级vs2010到vs2012,突然发现build出来的应用程序无法运行,提示“不是有效的 win32 应用程序” or “not a valid win32 application”. 参考CSDN ...
- 【扩展欧几里得】Bzoj 1477:青蛙的约会
Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...
- [转载]JS、C#编码解码
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@ ...
- dijkstra,bellman-ford,floyd分析比较
http://www.cnblogs.com/mengxm-lincf/archive/2012/02/11/2346288.html 其实我一直存在疑惑是什么导致dijkstra不能处理负权图? 今 ...
- Cloud Insight 和 BearyChat 第一次合体,好紧张!
说到 ChatOps 我们可能立刻想到是 Slack(啥?没听过?哦!),但是由于国内网络和语言的问题你可能无法拥有很好的体验了.那就把目光转回国内吧,国内的话就不得不提到 BearyChat 等 C ...
- VC中不同类型DLL及区别
1. DLL的概念可以向程序提供一些函数.变量或类. 静态链接库与动态链接库的区别:(1)静态链接库与动态链接库都是共享代码的方式.静态链接库把最后的指令都包含在最终生成的EXE文件中了:动态链接库不 ...
- SpringMVC ResponseBody返回中文乱码解决方案
@RequestMapping(value = "/getForm") @ResponseBody public List<String> getForm(String ...
- 利用link标签rel="alternate stylesheet"属性实现界面动态换肤
rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用 ...
- [itint5]判断是否为二叉搜索树
http://www.itint5.com/oj/#25 这题在leetcode上是用中序遍历来做的,但是这里由于有相等的情况,即左子树小于等于根,这样中序遍历无法完全判定.可以用递归来做,用递归给出 ...
- MSSQLServer基础05(联合查询,连接查询)
联合结果集union(集合运算符) 集合运算符是对两个集合操作的,两个集合必须具有相同的列数,列具有相同的数据类型(至少能隐式转换的),最终输出的集合的列名由第一个集合的列名来确定.(可以用来连接多个 ...