position的absolute和relative的应用详解

前老弄不明白,只能凭借一点短期内“虐出来的经验”制作需要的效果,后来仔细研究了一下Hutia的XScroller,并且仔细看了文档,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。

默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。

也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构

<div id="A">
 <div id="B">
 </div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。

 

时间: 2024-08-28 21:55:00

position的absolute和relative的应用详解的相关文章

CSS中HTML元素定位Position参数可选值详解

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 语法: position : static | absolute | fixed | relative 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" static 元

详解CSS的定位语法应用

css|详解|语法 一.CSS定位:position 语法: position : static | absolute | fixed | relative  取值: static  : 默认值.无特殊定位,对象遵循HTML定位规则  absolute  : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过 z-index 属性定义  f

CSS盒子模式详解四

前言 在用CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来,比如CSS相册等等,因此自己杂乱的网页与高手完美的设计形成鲜明对比,这在一定程度上打击了初学定位的网友,也在他们心目中形成这样的一种思想:当我熟练地玩转CSS定位时,我就已是高手了.不管你怎么想,我只希望下面的教程能让你更深入地了解CSS定位属性. 阅读建议 先说说我这篇教程的思路,这对于你

《微信小程序:开发入门及案例详解》—— 3.2 浮动和定位

3.2 浮动和定位 了解基本盒子模型后,本小节开始讲解定位相关的内容,定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现在哪,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.浮动和定位是我们常用的布局方案,WXSS也支持Flex布局方案,接下来我们将对这三种布局方案一一讲解. 3.2.1 浮动 浮动不完全是定位,同时它也不是正常流布局,通过设置float属性,浮动的框可以向左或者向右移动,直到其外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,文档的普通

zoom属性只有当对象的position属性为absolute,或者relative;怎么解决

问题描述 zoom属性只有当对象的position属性为absolute,或者relative;怎么解决 zoom属性只有当对象的position属性为absolute,或者relative;怎么解决

CSS中绝对定位absolute和相对定位relative详解

一.position语法与结构 position语法: position : static absolute relative position参数: static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过css z-index属性定义.此时对象不具有边距,但仍有补白和边框 relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文

CSS魔法堂:Position定位详解

一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top.right和bottom的CSS规则来改变元素的位置.        注意点:[a]. 元素原来位置将保留,不被其他元素所占据;                      [b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为参考点 ;           

详解CSS定位position及应用场景实例

首先我们对postion属性进行详解. 在CSS3中,对于postion是这么描述的 总结如下:static 是默认布局,设置top\left..属性不会有作用.relative是相对布局,设置的top\left..会相对文件中的控件.absolute是绝对定位,设置的top\left..会相对整个页面而定.fixed是相对浏览器窗口定位,设置的top/left属性,是相对于浏览器窗口的位置. 除此之外,经过我代码测试:1.如果top\left..其中某属性缺省,absolute,fixed布局

absolute与relative的运用示例

Div + CSS 进行网页布局,适当地运用 absolute 与 relative,能给布局带来意想不到的效果和方便,达到事半功倍-本文介绍了关于 absolute 与 relative 的运用. 详细讲解两者的关系,需要配合例子,请先看例子:   以下是引用片段:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-