css中的四个不同的position设置
<!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设置的更多相关文章
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- css中position与z-index
position属性 在css中,position属性用来控制元素的位置信息,其取值共有4种,即static.relative.absolute.fixed. 静态定位(static) 若没有指定po ...
- 装载：对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
随机推荐
- [NHibernate]ISessionFactory配置
系列文章 [Nhibernate]体系结构 引言 在上篇文章学习了orm和nhibernate相关概念,这篇文章主要学习ISessionFactory如何配置. 因为NHibernate被设计为可以在 ...
- JavaScript从父页面获取子页面的值（子页面又如何访问父页面）
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
- CPU思考
线程高并发 会导致CPU load长,线程大运算量和大量线程 会导致CPU利用率高 因为CPU处理都是原子操作的,8核CPU在同一时刻最多也只能处理8个线程,但是因为处理的非常快,所以即使几万个简单线 ...
- 坑爹的私有API
iOS私有API扫描工作总结 背景 苹果提供的iOS开发框架分PrivateFramework和Framework,PrivateFramework下的库是绝对不允许在提交的iOS应用中使用的,只允许 ...
- Linux 网络子系统
今天记录一下Linux网络子系统相关的东西. 因为感觉对这一块还是有一个很大的空白,这件事情太可怕了. 摘抄多份博客进行总结一下Linux网络子系统的相关东西. 一. Linux网络子系统体系结构 L ...
- js 时间构造函数
js 时间构造函数,js中没有类似ToString("yyyy-mm-dd HH:mm:ss") 的方法,但是可以用下面的方式来初始化 var cdate = new Date(& ...
- java2
1:关键字(掌握) (1)被Java语言赋予特定含义的单词 (2)特点: 全部小写. (3)注意事项: A:goto和const作为保留字存在. B:类似于Notepad++这样的高级记事本会对关键字 ...
- 日志解析LogParse启动参数配置
-task task_stat1001to1010.yaml -log log4j_stat1001to1010.xml 用绝对路径
- webservice发布服务：CXF及客户端调用
2.CXF:(与spring整合) CXF相对来说操作没有AXIS繁琐 1.导入spring的jar包和cxf的jar包 2.在spring的核心配置文件中配置发布的接口类 <?xml vers ...
- javaWeb项目部署到阿里云服务器步骤
记录web项目部署到阿里云服务器步骤 (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以 ...