HTML中的布局方式:absolute、relative、fixed、static
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素,其总是固定在浏览器窗口的某个位置,并且不受滚动的影响,是绝对的坐标定位。可通过z-index进行层次分级。
注:
CSS中定位的层叠分级:z-index: auto | namber;
auto
遵从其父对象的定位namber 无单位的整数值。可为负数,默认值为0,越大越靠上,值大的元素会覆盖住值小的元素。
- div1和div2由于是absolute布局,其位置完全由left和top来决定,不受父元素的padding的影响,完全脱离文档流
- div3和div4是relative布局,其位置除了由left和top来决定外,还受父元素的padding以及文档流的影响,比如,div4就受到了div3的影响,尽管其top和div3一样都是0,但是却显示在div4的下面,因为div3在文档流中,div4只能跟着文档流,排在div3的下面
- div5是fixed布局,其位置始终是左上角,即使浏览器滚动,它还是固定在左上角
- 关于z-index,如果不写则默认值是0,上面的例子很好的说明了z-index的作用
- absolute布局,其参考点是最近的具有position属性的元素,如果本例中将main div的position属性去掉的话,整体布局就会不一样,这个时候,div1和div2的参考点是body
- <html><head>
- <style type="text/css">
- body{margin:0px;padding:0px;line-height:100%;}
- div
- {
- background-color:rgb(159, 206, 159);
- width:95px;
- height:95px;
- margin: 0px 0px 1px 1px;
- padding:0px;
- /*display:inline-block;*/
- letter-spacing:1px;
- /* only for ie*/
- *display:inline;
- *zoom:1;
- border:1px solid #ffffff;
- border-radius:5px;
- -moz-border-radius:5px; /* Old Firefox */
- opacity:1;
- text-align:center;
- color:white;
- }
- #main{width:400px;height:300px;}
- </style>
- </head>
- <body>
- <div id="main" style="
- position: relative;
- margin: 50px;
- padding: 80px;
- ">
- <div id="div1" style="
- position: absolute;
- left: 83px;
- top: 0px;
- background-color: rgb(199, 219, 50);
- ">div1 absolute</div>
- <div id="div2" style="
- position: absolute; left: 0px;
- top: 90px;
- background-color: rgb(1, 214, 35);
- z-index:10;
- ">div2 absolute z-index<br/>:10</div>
- <div id="div3" style="
- position: relative; left: 0px;
- top: 0px;
- background-color: rgb(23, 178, 238);
- z-index:11
- ">div3 relative z-index:11</div>
- <div id="div4" style="
- position: relative; left: 0px;
- top: 0px;
- background-color: rgb(23, 178, 238);
- z-index:0;
- ">div4 relative z-index:0</div>
- <div id="div5" style="
- position: fixed; left: 10px;
- top: 10px;
- background-color: rgb(229, 122, 238);
- ">div5 fixed</div>
- </div>
- </body></html>
HTML中的布局方式:absolute、relative、fixed、static的更多相关文章
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- Java中CardLayout布局方式的应用
import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...
- 【java】浅析java组件中的布局管理器
这篇博文笔者介绍一下java组件中,常用的布局管理器.java组件中的布局方式有好几十种,所有的这些布局管理器都实现了java.awt.LayoutManager接口.接下来笔者介绍一下常用的5种布局 ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- Android-基本控件和详解四种布局方式
转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...
- C#中Dictionary排序方式
转载自:https://www.cnblogs.com/5696-an/p/5625142.html 自定义类: https://files.cnblogs.com/files/xunhanliu/d ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
随机推荐
- 网线/双绞线上各标识CAT, AWG, PR, UTP/STP/FTP/SFTP的含义
CAT5, CAT5e, CAT6 表示网线类别, 常见的有 CAT5, CAT5e, CAT6分别表示五类, 超五类, 六类网线 24AWG, 26AWG American Wire Gauge是美 ...
- 关于highstock横坐标的一些的一些说明(1)使用UTC时间
highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]],而时间采用的是13位的毫秒值,如[1133136000000,69.66],采用的时间格式为UT ...
- POJ 1159 Palindrome(区间DP/最长公共子序列+滚动数组)
Palindrome Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 56150 Accepted: 19398 Desc ...
- Java菜鸟入坑学习要点
一.掌握静态方法和属性 静态方法和属性用于描述某一类对象群体的特征,而不是单个对象的特征.Java中大量应用了静态方法和属性,这是一个通常的技巧.但是这种技巧在很多语言中不被频繁地使用.理解静态方法和 ...
- Linux 查看登录日志及登录失败用户的ip-lastb
Linux 查看登录成功的用户信息 命令: last 最新的登录记录在最前面,所以可以用 一下命令来查看. last | less 查看登录失败的用户信息 命令: lastb 查看登录日志 命令: ...
- HDUOJ--8球胜负
8球胜负 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- C#中的Invoke和BeginInvoke
一.Control#Invoke() 和Control#BeginInvoke() 在非UI线程中调用MessageBox.Show()结果是非模态对话框: 在UI线程中调用MessageBox.Sh ...
- INFO ipc.Client:Retrying connect to server 9000
hadoop使用bin/start_all.sh命令之后,使用jps发现datanode无法启动 This problem comes when Datanode daemon on the syst ...
- WordPress 博客文章中google adsense广告展示方法之一
http://log.medcl.net/item/2011/08/diving-into-elasticsearch-4-installation-and-configuration/ 看到这个网站 ...
- C#中遍历DataTable类型并删除行数据
从数据库中读取出了DataSet类型的数据,通过dataSet.Tables[0]获得DataTable类型的数据. 这时候如果想批量修改dataTable中的内容,比如要删除dataTable中co ...