Html position中的 absolute relative static fixed的区别和理解
来源:互联网 发布:centos 移除安装包 编辑:程序博客网 时间:2024/06/03 11:56
每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位.
然则在IE中浮动元素也存在于文档流中,浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常的文档流,然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
基于文档流,理解以下的定位形式:
相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
绝对定位:即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。
固定定位:即完全离开文档流,相关于视区进行偏移。
文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。
网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position来控制。
二、CSS 2.0对position的定义:检索对象的定位方式。共有4种取值。
absolute:绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义
。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
fixed:固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。
relative:相对定位。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。
static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
inherit:继承值,对象将继承其父对象相应的值。
所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图
- <html>
- <head>
- <title>DIV+CSS</title>
- <style>
- #div1 {
- border: 1px solid #000099;
- height: 60px;
- width: 200px;
- margin:2px;
- }
- #div2 {
- border: 1px solid #000099;
- height: 60px;
- width: 200px;
- margin:2px;
- }
- #div3 {
- border: 1px solid #000099;
- height: 60px;
- width: 200px;
- margin:2px;
- }
- </style>
- </head>
- <body>
- <div id="div1">div1</div>
- <div id="div2">div2</div>
- <div id="div3">div3</div>
- </body>
- </html>
在文档流中,每个块元素都会被安排到流中的一个位置,我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位, 相对定位是相对于该块元素在文档流中的位置的,比如,我们可以使用相对定位把div2放到div1的右侧,CSS代码如下:
- Html position中的 absolute relative static fixed的区别和理解
- HTML之position:absolute relative static fixed的区别和理解
- HTML之position:absolute relative static fixed的区别和理解
- Html position(static、relative、absolute、fixed)
- Html position(static、relative、absolute、fixed)
- 关于position:relative,absolute,fixed和static
- position 的 static、relative、absolute、fixed、inherit
- position 的 static、relative、absolute、fixed、inherit
- position的static、relative、absolute、fixed、inherit
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position属性四个值:static、fixed、absolute和relative的区别和用法
- Position(Static, Absolute, Relative, Fixed)
- position:static|absolute|fixed|relative
- Hibernate映射组件属性
- 工欲善其事,必先利器—Regex正则表达式工具
- POJ
- windows忘记mysql 密码
- 在oracle中实现DateDiff函数的功能
- Html position中的 absolute relative static fixed的区别和理解
- 数值计算处理之二分法
- 一条mysql语句查询出男女的人数
- gitk显示中文乱码
- iOS app调起微信支付后崩溃闪退的问题
- Ogre灯光
- 物联网时代制造企业对大数据的运用分析
- HDU 6090 Rikka with Graph (贪心+构造, 2017 Multi-Univ Training Contest 5)
- hdu1251统计难题-字典树模板题