<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<style>

/* Positioning */

css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层

元素能用 top,bottom,left 和 right 属性设置位置, 但是在默认情况下是不管用的,除非先设置了position属性

HTML 元素的位置默认是设置为静态(static)的, 位置设置为静态的元素的位置通常是根据正常的页面流向(flow)设置的

位置为静态的元素是不能被 top,bottom,left,right 影响的

共有四个不同的position设置方法

.fixed 采用fixed position 的元素位置的设置相对于浏览器窗口

An element with fixed position is positioned relative to the browser window.

窗口滚动它也不会移动

It will not move even if the window is scrolled:

.relative 相对位置指的是相对于它自己正常的位置

.absolute 相对于第一个(紧包着的,最里层的)父元素

An absolute position element is positioned relative to

the first parent element that has a position other than static.

If no such element is found, the containing block is <html>:

.overlapping 通过设置 position 和 z-index

* {
margin: 0px;
/*padding: 0px;*/
}

.pos_fixed {
position: relative; /*A relative positioned element is positioned relative to its normal position.*/
left: 10px;
top:10px;
width: 100px;
height: 100px;
border: 1px solid seagreen;
}

h2.pos_left {
position: relative;
left: -20px;
border: 1px solid crimson;
}

h2.pos_right {
position: relative;
left: 20px;
border: 1px solid crimson;
}

</style>

</head>
<body>

<div class="pos_fixed">
hello everyone.
</div>

<h2>This is a heading with no position</h2>

<h2 class="pos_left">This heading is moved left according to its normal position</h2>

<h2 class="pos_right">This heading is moved right according to its normal position</h2>

<p>Relative positioning moves an element RELATIVE to its original position.</p>

<!--<progress>progress</progress>-->

</body>
</html>

css中的四个不同的position设置的更多相关文章

  1. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  3. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  6. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  7. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  8. css中position与z-index

    position属性 在css中,position属性用来控制元素的位置信息,其取值共有4种,即static.relative.absolute.fixed. 静态定位(static) 若没有指定po ...

  9. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

随机推荐

  1. No module named migrate.versioning

    在学习mega-tutorial的数据库章节时创建数据库遇到了问题,在stackoverflow上找到了结果 pip install sqlalchemy==0.7.9 pip install sql ...

  2. debian下NTFS分区无法访问解决

    打开终端 # ntfsfix /dev/sda3 (/dev/sda3是上图中划红框的部分,根据实际情况替换) 如果这个磁盘可以正常挂载,说明问题已经解决了,其他磁盘在重启后也可以挂载了 如果不想重启 ...

  3. [NHibernate]缓存（NHibernate.Caches)

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  4. Mysql存中文值乱码

    一是安装mysql时,其中会有一个步骤选择编码方式,此时选择gbk即可.如果不选择,默认的编码是latin1: 二是在安装玩mysql之后,手动修改其配置文件,如下: (1)修改 MySql安装目录下 ...

  5. 《UNIX环境高级编程第三版》apue.h等源码文件的编译安装

    操作系统:Ubuntu 12/14 1.下载书中的源代码:点击下载 2.编译 tar -zxvf *.tar.gz cd ./apue.3e make 报错: can,t find -lbsd 解决办 ...

  6. 利用 autoconf 和 automake 生成 Makefile 文件

    一.相关概念的介绍 什么是 Makefile?怎么书写 Makefile?竟然有工具可以自动生成 Makefile?怎么生成啊?开始的时候,我有这么多疑问,所以,必须得先把基本的概念搞个清楚. 1.M ...

  7. ASP.NET Core--基于授权的资源

    翻译如下: 通常授权取决于正在访问的资源. 例如,文档可以具有作者属性. 将只允许文档作者对其进行更新,因此必须在进行授权评估之前从文档存储库加载资源. 这不能使用Authorize属性来完成,因为属 ...

  8. [codevs1105][COJ0183][NOIP2005]过河

    [codevs1105][COJ0183][NOIP2005]过河 试题描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青 ...

  9. selenium+testng+ant+jenkins 手记

    会不会搭建测试平台是一般测试工程师和高级测试工程师分水岭 ----tobecrazy 我们项目有现成的测试平台,使用的是selenium grid+testng+ant+jenkins+VM 但是我平 ...

  10. MySQL 5.7 学习：新增配置参数

    背景: 继上次介绍 初识 MySQL 5.6 新功能.参数完之后,刚好MySQL 5.7又GA了,在官方测试里看到,MySQL5.7在功能.性能.可用性.安全和监控上又提升了很高.现在看看和MySQL ...