CSS position 属性
position: relative | absolute | static | fixed
参考网站：http://blog.csdn.net/dyllove98/article/details/8967114
http://www.jb51.net/css/22213.html
http://blog.jobbole.com/49320/
实践网站：http://www.w3school.com.cn/cssref/pr_class_position.asp
static : 无特殊定位，对象遵循HTML定位默认规则
absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占
relative : 相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。
fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变
1.通过绝对定位，元素可以放置到页面上的任何位置，如果那个位置上有元素则覆盖了它。下面的标题距离页面左侧 100px，距离页面顶部 150px。
h2
{
position:absolute;
left:100px;
top:150px;
} 如果两个元素重叠，则看z-index值的大小，显示z-index值最大的，默认的 z-index 是 0。Z-index 1 拥有更高的优先级。 2.通过相对定位，元素可以放置到页面上的任何位置，本身位置发生变化，而元素所占的物理空间还是存在，另外还有一点，定位后如果与原本那个位置上有元素，则与之重叠，两个元素都会显示
h2
{
position:relative;
left:100px;
top:150px;
}
3.float
前两步，使用绝对定位都并不是很理想，那么我们可以考虑使用float来解决。我们可以在一个元素上使用float，让元素向左或向右，
而且还可以使用文本围绕在这个元素的周边（这个作用在文本围绕图片特别有用）。下面来模拟一下 float：left/right
4.为了让浮动元素的父元素不在处于塌陷状态下，我们需要对浮动元素进行清除浮动： clear:both;
5.fixed 固定在屏幕的某个位置 不管下滑上滑都不会变位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
#help{
width:100%;
height:50px;
background-color:#ffff33;
position:fixed;
left:0px;
bottom:0px;bottom
color:red;
}
#top{
width:100%;
height:800px;
background-color:#ff6600;
}
</style>
<body>
<div id="top"></div>
<div id="help"><center><h2>我是底部P标签</h1></center></div>
</body>
</html>
CSS position 属性的更多相关文章
- 【转载】CSS position属性和实例应用
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
- 详解CSS position属性
原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- CSS position 属性_css中常用position定位属性介绍
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...
- css position属性
absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...
- CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏
踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...
- CSS position属性---absolute与relative
详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
- CSS - position属性小结
Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...
随机推荐
- ggplot2 theme相关设置—线条设置
在ggplot的主题射中有一部分图需要对图中的部分线条进行设置 element_line(colour = NULL, size = NULL, linetype = NULL, lineend = ...
- ActiveMQ in Action(1) - JMS
关键字: activemq 1 JMS 在介绍ActiveMQ之前,首先简要介绍一下JMS规范.1．1 JMS的基本构件1．1．1 连接工厂 连接工厂是客户用来创建连接的对象,例如Acti ...
- NHibernate初步使用
1.创建一个网站项目:QuickStart 2.引用程序集:NHibernate.dll 3.更改配置文件加入以下节点: <configSections> <section name ...
- [ An Ac a Day ^_^ ] CodeForces 586C Gennady the Dentist 模拟
题意: n个小朋友去拔牙 每个小朋友在拔牙的时候会哭 哭声是vi分贝 距离门口vi远的小朋友听到了哭声会害怕 他们的勇气值p会减少d 如果勇气值p小于等于零 他们就会在门外哭并立即离开拔牙队列(回家找 ...
- PHP input 显示html 元素
使用函数 htmlspecialchars ,转换保存的html源码,前台使用转换后的变量.
- NOIP2014-普及组复赛-第四题-子矩阵
题目描述 Description 给出如下定义: 1. 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第2.4行 ...
- JPA 系列教程14-自定义类型-@Embedded+@Embeddable
自定义类型 在hibernate中实现自定义类型,需要去实现UserType接口即可或者以Component的形式提供. JPA的@Embedded注解有点类似,通过此注解可以在Entity模型中使用 ...
- Ubuntu编译安装PHP7
参数配置 ./configure --prefix=/usr/local/php7 \ --with-config-file-path=/usr/local/php7/etc \ --with-apx ...
- IIS:错误: 无法提交配置更改，因为文件已在磁盘上更改
文件名: \\?\C:\Windows\system32\inetsrv\config\applicationHost.config 错误: 无法提交配置更改,因为文件已在磁盘上更改 通过 Micro ...
- cpanel 定时运行sh/php
php -q /home/用户/public_html/cron.php -------------------php格式 /home/用户/public_html ...