HTML之Position用法,超实在。
position的四个属性值:
1.relative
2.absolute
3.fixed
4.static
下面分别讲述这四个属性。
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
1. relative
relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我 们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为 relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于 此。
对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。
随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。
如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
2. absolute
这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。
当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。
注 意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了 margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上 角开始)进行定位,也就是忽略padding,当然并不会忽略margin和border。
接下来的问题是,sub2的位置到哪里去了 呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。
(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
3. fixed
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位,即使拖动滚动条,他的位置也是不会改变的。与background-attachment:fixed相似
当然在Dreamweaver下似乎没有支持
4. static
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。
转自:http://www.cnblogs.com/yinc/articles/2017649.html
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀分享 2013年4月19日 14:42:33 星期五
相关推荐
- `position` 属性是实现复杂布局的关键之一,掌握它的用法对于前端开发者来说至关重要。 - 每种定位方式都有其独特的应用场景,选择合适的定位方式可以极大地提高页面布局的灵活性和可维护性。 - 实际开发中,经常...
在`ie6.css`中,我们可以使用其他方法替代`position: fixed;`,如`position: absolute;`配合JavaScript进行动态调整。 2. **使用expression()表达式**: IE6支持CSS表达式,可以通过它来计算元素的位置。例如,...
理解和掌握position属性及其值的用法,对于前端开发者来说至关重要,它不仅可以帮助开发者构建出更加复杂和动态的用户界面,还可以提高页面布局的灵活性和可控性。熟练运用这些定位技术,可以让页面元素在不同情况下...
2. **使用绝对定位替代固定定位**:对于IE6,使用`position: absolute;`代替`position: fixed;`,并通过JavaScript动态计算元素的位置。 3. **使用背景图片技巧**:通过设置`background-attachment: fixed;`来解决IE...
《Position属性之relative用法详解》 在网页布局设计中,CSS(层叠样式表)的position属性扮演着至关重要的角色。本文将深入探讨position属性中的relative用法,帮助开发者更好地理解和运用这一特性。 首先,我们...
在网页设计和开发中,`position`属性是CSS(层叠样式表)中的一个关键概念,用于...本学习文件将详细介绍每个定位方式的用法,并可能包括实例代码、示例布局和解决常见问题的技巧,帮助你深化对`position`属性的理解。
一种常见的方法是使用条件注释(Conditional Comments)配合JavaScript库如jQuery或Modernizr来检测浏览器版本,然后为IE6提供替代的布局方案。例如: ```html <!--[if lt IE 7]> <script src="ie6-position-fix....
在这个“HTML CSS——position学习终结者(二)”的资料中,我们预计将深入探讨`position`的各种用法和技巧。 首先,`position`属性用于定义元素在页面布局中的定位类型。它有四个主要值:`static`(默认值)、`...
理解这两个方法的用法对于进行精确的页面布局和动态效果处理至关重要。 `offset()`方法返回的是匹配元素相对于文档视口的顶部和左侧的距离。这意味着,当你调用`offset().top`和`offset().left`时,你得到的是元素...
position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值: •static •relative •fixed •absolute •sticky 然后使用top,bottom,left和right属性定位元素。但是,除非...
博客链接中的`getPosition1.html`和`getPosition2.html`可能包含了两种不同的实现方式,一种可能是使用`getBoundingClientRect()`,另一种可能是通过遍历父元素。通过分析这些示例代码,我们可以更深入地理解这两种...
要正确使用Position方法,并确保在各种浏览器中都能获得一致的表现,需要对它的功能和兼容性有深入的理解。 首先,我们来详细探讨Position方法与jQuery中的另一个常用方法offset()之间的区别。offset()方法用于获取...
在提供的文件列表中,`2.html`和`1.html`可能是示例代码或测试页面,用来演示在IE6下使用`position:fixed`的各种hack方法。分析这些文件可以帮助我们更深入地了解在实际项目中如何解决IE6的兼容性问题。 总结来说,...
这些属性通常与`position`属性结合使用,以实现精准的定位。 - **`left` 和 `right`**:控制元素在水平方向上的位置。 - **`top` 和 `bottom`**:控制元素在垂直方向上的位置。 **外边距属性**(`margin`)用于在元素...
当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于...
本教程将深入探讨`position`属性的各个方面,包括其基本用法、不同值的含义以及实际应用。 一、`position`属性的基本概念 `position`属性主要用于设置HTML元素的定位类型。它可以接受以下四个主要值: 1. `static...
在互联网早期,Internet Explorer 6 (IE6) 是一个广泛使用的浏览器,但它的CSS支持并不完善,特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素,使得元素相对于视口...
在提供的`position demo.html`文件中,可能包含了这两个定位属性的实际示例,通过查看和编辑这个文件,可以更直观地理解它们的效果和用法。 总结起来,`position: relative`和`absolute`在CSS布局中各有其独特的...