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基本一 ...
随机推荐
- c# propertyGrid下拉选项
实现下面效果的propertygrid属性下拉选择
- hdu_5908_Abelian Period(暴力)
题目链接:hdu_5908_Abelian Period 题意: 给你n个数字,让你找出所有的k,使得把这n个数字分为k分,并且每份的数字种类和个数必须相同 题解: 枚举k,首先k必须是n的约数,然后 ...
- openwrt的uboot环境变量分析
目前烧写完CC(chaos calmer 15.05)版本,查看其uboot变量如下: ath> printenvbootargs=console=ttyS0,115200 root=31:02 ...
- Hexo搭建静态个人博客
Hexo简介 之前在Github上托管的博客就是使用jekyll搭建的,官方的Github Pages同样推荐使用它.我之前体验了一下jekyll,没有达到我想要的效果.于是寻找替代方案,搜索同类博客 ...
- c/c++常用的几个关键字总结
一.volatile volatile提醒编译器它后面所定义的变量随时都有可能改变,因此编译后的程序每次需要存储或读取这个变量的时候,都会直接从变量地址中读取数据.如果没有volatile关键字,则编 ...
- matlab显示图像的横纵坐标
imshow(I);title('公路');axis on; %如果不需要,on改为off
- jquery_核心_(1)
1.data([key],[value]) 概述 在元素上存放或读取数据,返回jQuery对象. 当参数只有一个key的时候,为读取该jQuery对象对应DOM中存储的key对应的值,值得注意的是,如 ...
- drawableLayout的使用（转载讲的比较清晰的文章）
创建drawbler的布局文件 初始化drawbler的列表 响应drawable列表点击事件 现在侧滑菜单使用很多,大都是通过SlidingMenu实现.现在也可以通过DrawerLayout 创建 ...
- j2ee网站项目首页如何直接使用action
之前做过一些网站项目,大多数都是首页就是登录,直接进入首页的不多,也就没有注意到,今天刚好注意到了就来记一下.也算是一个小技巧 <welcome-file>index.jsp</we ...
- Entity Framework技巧系列之十三 - Tip 51 - 55
提示51. 怎样由任意形式的流中加载EF元数据 在提示45中我展示了怎样在运行时生成一个连接字符串,这相当漂亮. 其问题在于它依赖于元数据文件(.csdl .ssdl .msl)存在于本地磁盘上. 但 ...