<!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. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. css 图片垂直居中总结

    1.利用vertical-align:middle: 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block:图片样式设置ve ...

  3. 进入OS前的两步之PendSV(任务切换)

    先了解下如何使用PendSV异常.(为何要使用PendSV而不是其他的异常,请参考<cortex-M3权威指南>) 1,如何设定PendSV优先级? NVIC_SYSPRI14 EQU 0 ...

  4. ubuntu常用命令

    <一> 安装文件 一.deb包的安装方式 sudo dpkg -i *.deb 二.编译安装方式 建立编译环境sudo apt-get install build-essential 到源 ...

  5. JSP动作元素之useBean、setProperty、getProperty指令

    简介 这三个指令都是与JavaBean相关的指令,其中useBean指令用于在JSP页面中初始化一个Java实例:setProperty指令用于为JavaBean实例的属性设置值:getPropert ...

  6. 评价cnblogs.com的用户体验

    我们作为大学计算机科学与技术专业的本科生,使用博客园主要是用来搜索和阅读技术资料,并且使用它来编辑发表博客.我们偏向于搜索便捷,界面友好的网站风格.我们对cnblogs的期望是更便捷精准,更便于编辑. ...

  7. 升级到 PHP-7 遇到的坑 及 经验分享

    注意:上面这张图是QQ群网友分享的,图中提到的“被移除的函数”,call_user_func 和 call_user_func_array 在 PHP-7.0 的正式版中是可用的,也许是当时的 测试版 ...

  8. Spring中集合类型属性注入

    我们都知道如何去注入普通属性的值,非常简单,那么我们如何去注入开发中常见的集合类型的属性了,别急,往下看. 这里将介绍如何给Map list set Array Properties 这些属性注入值. ...

  9. 7.1WebApi2的异常处理

    这篇文章描述错误和异常处理在 ASP.NET Web API. HttpResponseException 如果 Web API 控制器引发未捕获的异常,会发生什么?默认情况下,大多数异常被转译为 H ...

  10. Burpsuite+sqlmap批量扫描sql漏洞

    1.burpsuite设置导出log n'd'k 输入文件名保存 2.sqlmap批量扫描     python sqlmap.py -l 文件名 --batch -smart     batch:自 ...