`
cjx186
  • 浏览: 269681 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

CSS中position的absolute和relative的应用

阅读更多
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了。

这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。
分享到:
评论

相关推荐

    CSS中的position 的值: absolute 与 relative

    在CSS(层叠样式表)中,`position`属性...总结起来,`position: relative`和`absolute`在CSS布局中各有其独特的功能和用途。理解并熟练运用它们,能帮助开发者更好地控制网页元素的布局,实现更复杂、精细的设计效果。

    css的position里的relative和absolute的区别.docx

    CSS Position relative 和 absolute 的区别 在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有五个值:static、inherit、fixed、absolute 和 relative。今天,我们将深入探讨 ...

    css中position:relative和overflow:hidden的问题

    在CSS布局中,`position:relative`和`overflow:hidden`是两个非常重要的属性,它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先,我们来看`...

    css position: absolute、relative详解

    总结来说,position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素(或者初始包含块)进行定位,而relative则让元素保持在文档...

    关于position、absolute、relative层叠加的技巧

    Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是默认值,relative、absolute 和 fixed 是动态定位的三种方式。 静态定位(Static Positioning) -------------------------...

    css中定位中的absolute和relative是什么意思

    Position属性有四个值:static、fixed、absolute和relative, 后面两个在布局中的定位里是经常用到的,顾名思义, absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对...

    关于CSS position属性值absolute,relative的解释.zip

    本文件主要探讨了`position`属性的两个关键值:`relative`和`absolute`,这些知识点对于创建复杂的网页布局至关重要。 首先,我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...

    position的relative和absolute总结

    本文将详尽地探讨`position`属性中的`relative`和`absolute`值,以及它们在网页设计中的应用。 首先,`position`属性的默认值是`static`,这意味着元素遵循正常的文档流,即按顺序从上到下、从左到右排列。但当我们...

    CSS中的position:relative;的作用示例介绍

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素如何在页面上定位。在你的问题中,你特别关注了`position:relative;`的作用,这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...

    Div CSS absolute与relative的区别小结

    在定位的众多属性中,CSS的position属性的两个值:absolute和relative,是经常被使用的。它们各自有着独特的特性以及应用场景。 首先,我们需要了解什么是绝对定位(absolute)和相对定位(relative)。绝对定位是...

    CSS position属性absolute relative等五个值的解释

    《CSS position属性详解:absolute, relative及其他值》 在网页设计中,CSS(层叠样式表)的position属性是至关重要的,它决定了元素在页面上的布局方式。position属性有五个基本值:static、relative、absolute、...

    CSS Position

    "CSS Position"是一个关键概念,它决定了元素在页面上的位置和排列方式。理解并掌握CSS定位对于创建响应式、动态且布局精确的网页至关重要。 **定位模式** CSS提供了几种定位模式,包括静态定位(static)、相对...

    CSS之Position详解

    `position`属性共有四种取值:`relative`、`absolute`、`fixed` 和 `static`。接下来我们将详细介绍这四种定位方式。 #### 1. Relative(相对定位) 相对定位是指相对于元素原本的位置进行偏移。当一个元素设置了`...

    li标签的position:absolute与relative案例应用

    本案例中涉及到的是`position`属性的两个值:`relative`和`absolute`,它们在li标签的应用中起到了决定性的作用。 首先,我们来看`position: relative;`。当一个元素的`position`属性设置为`relative`时,它会相...

    position:relative/absolute无法冲破的等级

    通过对`position:relative`与`position:absolute`的理解和应用,我们可以解决许多复杂的布局问题。本文介绍的问题只是CSS布局中常见挑战之一,通过适当调整CSS属性和HTML结构,可以有效克服这些问题,确保页面布局...

Global site tag (gtag.js) - Google Analytics