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

<style>

/* Positioning */

  1. css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层
  2. 元素能用 top,bottom,left 和 right 属性设置位置, 但是在默认情况下是不管用的,除非先设置了position属性
  3.  
  4. HTML 元素的位置默认是设置为静态(static)的, 位置设置为静态的元素的位置通常是根据正常的页面流向(flow)设置的
  5. 位置为静态的元素是不能被 top,bottom,left,right 影响的
  6.  
  7. 共有四个不同的position设置方法
  8.  
  9. .fixed 采用fixed position 的元素位置的设置相对于浏览器窗口
  10. An element with fixed position is positioned relative to the browser window.
  11. 窗口滚动它也不会移动
  12. It will not move even if the window is scrolled:
  13.  
  14. .relative 相对位置指的是相对于它自己正常的位置
  15.  
  16. .absolute 相对于第一个(紧包着的,最里层的)父元素
  17. An absolute position element is positioned relative to
  18. the first parent element that has a position other than static.
  19. If no such element is found, the containing block is <html>:
  20.  
  21. .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. yield和send的执行循序彻底搞清

    yield: 对于yield方法和Generator的send同时使用时的执行顺序一直搞不清,今天看到这篇 理解PHP中的Generator 加上测试,终于搞清了. 总结一下上文中的结论: Gener ...

  2. PHP 过滤器

    PHP 过滤器 PHP 过滤器用于验证和过滤来自非安全来源的数据,比如用户的输入. 什么是 PHP 过滤器? PHP 过滤器用于验证和过滤来自非安全来源的数据. 测试.验证和过滤用户输入或自定义数据是 ...

  3. Linux进程间通信（一）： 信号 signal()、sigaction()

    一.什么是信号 用过Windows的我们都知道,当我们无法正常结束一个程序时,可以用任务管理器强制结束这个进程,但这其实是怎么实现的呢?同样的功能在Linux上是通过生成信号和捕获信号来实现的,运行中 ...

  4. CentOS Linux系统下更改Apache默认网站目录

    引言: Apache默认的网站目录是在/var/www/html,我们现在要把网站目录更改到/home/wwwroot/web1/htdocs,操作如下 准备工作: 创建目录: cd /home mk ...

  5. 【Android学习】解决Eclipse AVD打开慢的问题

    1.创建的时候勾选“Snapshot” 2.之后Start时候勾选对应的.

  6. 04OC之分类Category,协议Protocol,Copy,代码块block

    一.Protocol协议 我们都知道,在C#有个规范称之为接口,就是规范一系列的行为,事物.在C#中是使用Interface关键字来声明一个接口的,但是在OC中interface是用来声明类,所以用了 ...

  7. Fedora中允许mysql远程访问的几种方式

    Fedora中允许mysql远程访问,可以使用以下两种方式:a.改表. mysql>use mysql; mysql>update user set host = '%' where us ...

  8. 【分享】SQL中的注入漏洞

    例:假设一个账户密码的输入在数据库中是这样进行判断的. ' ) AS PWDCORRECT FROM T_USER WHERE FUSER= 'GUEST' 如果输入: ') AS PWDCORREC ...

  9. NSCache

    今天在优化的时候,用了NSCache,感觉没什么两样(视觉上).按理内存缓存,怎么也比从硬盘读取的要快.. dispatch_async(dispatch_get_global_queue(, ), ...

  10. 【转】Intellij IDEA 14中使用MyBatis-generator 自动生成MyBatis代码

    Intellij IDEA 14 作为Java IDE 神器,接触后发现,非常好用,对它爱不释手,打算离开eclipse和myeclipse,投入Intellij IDEA的怀抱. 然而在使用的过程中 ...