<!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. html5新增的主体结构元素

    1.  article 主体结构元素 通常是一篇文章.一个页面.一个独立完整的内容模块一般会带个标题,并放在 header 标签中,article 元素可以互相嵌套,使用频率极高,强调独立性,多注意下 ...

  2. [Head First设计模式]身边的设计模式——适配器模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

  3. gzip的使用

    经常会有文件过大,给文件的传输和增添了很多的麻烦,早先得知apach有个base64貌似可以用来压缩文件,但是测试没有什么效果,反而增大了文件的大小.今天了解了java自带的gzip包,如获至宝,超级 ...

  4. GNURadio 使用问题

  5. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  6. 亲历腾讯WEB前端开发三轮面试经历及面试题

    [一面]~=110分钟  2014/09/24 11:20  星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理        延 ...

  7. can't debug windows service in win7 64bit

    if encount below error: Solution: run the command “vsdiag_regwcf.exe -i” as admin in C:\Program File ...

  8. 解决table不能换行的问题与CSS之自动换行总结

    table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:style="table-layout:fi ...

  9. 【Alpha版本】冲刺阶段——Day 10

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  10. nginx负载均衡基于ip_hash的session粘帖

    nginx负载均衡基于ip_hash的session粘帖 nginx可以根据客户端IP进行负载均衡,在upstream里设置ip_hash,就可以针对同一个C类地址段中的客户端选择同一个后端服务器,除 ...