css运用中,对position属性的认识
position属性有:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
flex:对于html来定位;
强调absolute:absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的;
relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。
另:relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。(relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了,那么他原来的位置也就不存在了,
如果被定义成relative的对象被移出了 他原来的位置还在,别的元素就不能替代这个位置. ) 简言之:absolute 会把元素彻底移出文本流 relative 占座儿
从应用的角度来说,relative常用于包含有absolute元素的容器元素上。
absolute元素默认以body做为容器元素进行绝对定位。
如果你想在页面一个特定区域进行绝对定位,就可以在absolute元素外包裹一层容器元素应用relative样式。
css运用中,对position属性的认识的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 针对firefox ie6 ie7 ie8的css样式中的line-height属性
针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...
随机推荐
- include和 merge
include和merge标记的作用主要是为了解决layout的重用问题. 比如我们有三四个Activity但是他们都要用到同一个样式的标题栏,虽然我们把一样的代码copy个三四遍也没关系,但实在是太 ...
- C#获取本机局域网ip和公网ip
1.获取局域网ip IPAddress ipAddr = Dns.Resolve(Dns.GetHostName()).AddressList[0];//获得当前IP地址 string ip=ipAd ...
- Mysql转化blob为可读
-- info 为列名 SELECT convert(info using latin1) FROM drupal755.system; SELECT convert(info using utf8) ...
- POJ 2318 TOYS 叉积
题目大意:给出一个长方形盒子的左上点,右下点坐标.给出n个隔板的坐标,和m个玩具的坐标,求每个区间内有多少个玩具. 题目思路:利用叉积判断玩具在隔板的左方或右方,并用二分优化查找过程. #includ ...
- POJ 2635 The Embarrassed Cryptographer(大数求余)
题意:给出一个大数,这个大数由两个素数相乘得到,让我们判断是否其中一个素数比L要小,如果两个都小,输出较小的那个. 分析:大数求余的方法:针对题目中的样例,143 11,我们可以这样算,1 % 11 ...
- FZU 1912 Divisibility by Thirty-six(整除问题+字符串维护+贪心)
这个整除36的与整除45的完全一样,就是被4整除的有点多,但都是两位数,所以枚举后面两位就可以了. #include <stdio.h> #include <string.h> ...
- Linux学习 -- Shell编程 -- 流程控制
if语句 单分支 if [ 条件判断式 ]; then 程序 fi 或者 if [ 条件判断式 ] then 程序 fi 例子: 双分支 if [ 条件判断式 ] then 程序 else 程序 fi ...
- 转:loadrunner关联及web_reg_save_param方法浅析
一.什么是关联 关联(correlation):脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服务器所响应的内容中查找,得到相应的值,已变量的形式替换录制时的静态 ...
- 如何在使用eclipse的情况下,清理android项目中的冗余class文件和资源文件以及冗余图片
在我们迭代项目的过程中,经常会启用某些功能,或者修改某些界面的问题,那么问题来了,这样很容易出现大量的冗余.java文件,冗余资源文件,一些冗余的界面文件等.那么问题既然出现了,那么如何去解决呢,这就 ...
- PAT1008
1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B The highest building in our city has on ...