`
desert3
  • 浏览: 2160709 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

position relative absolute绝对定位和相对定位(转)

    博客分类:
  • Html
 
阅读更多
用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置,其位置偏移就会以该元素的原来位置作为参考点

1、当Position属性值为Relative时
对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时,只有left起作用。
2、当Position属性值为absolute时
对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
  在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。如果不存在设置relative的父级元素,那么absolute元素就会以body标签当作参考点。

参考:深入理解position:relative 与 position:absolute
分享到:
评论

相关推荐

    position的relative和absolute总结

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

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

    其中,static 是默认值,relative、absolute 和 fixed 是动态定位的三种方式。 静态定位(Static Positioning) ------------------------- 静态定位是 position 属性的默认值,元素在文档中的位置是根据文档的...

    绝对定位和相对定位

    在网页设计和开发中,定位(Positioning)是布局的关键元素,主要分为两种类型:相对定位(Relative Positioning)和绝对定位(Absolute Positioning)。这两种定位方式都是CSS(层叠样式表,Cascading Style Sheets...

    CSS 绝对定位属性absolute用法初探

    当`position`的值设为`absolute`时,元素就进入了绝对定位模式。此时,元素将从正常文档流中移除,不再影响周围元素的布局。相反,它会相对于最近的已定位祖先元素(即拥有非`static`定位的父元素,如`relative`、`...

    CSS中的position 的值: absolute 与 relative

    `position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流,即元素会...

    CSS网页布局教程:绝对定位和相对定位

    绝对定位允许一个元素相对于其最近的非静态定位祖先元素(即position属性值为relative、absolute或fixed的元素)进行定位。如果找不到这样的祖先,那么元素将相对于文档的body进行定位。使用`position: absolute;`来...

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

    CSS Position relative 和 absolute 的区别 在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有...理解这两者的区别是非常重要的,因为它可以帮助我们更好地控制元素的排版和定位。

    CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们

    2. **相对定位(Relative Positioning)**:当元素的`position`属性设置为`relative`时,该元素仍保持在正常的文档流中,但可以通过`top`、`right`、`bottom`和`left`属性调整其相对于原始位置的偏移量。这种定位...

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

    - **position:relative**:相对定位。元素相对于其正常位置进行定位,即相对于自身原来的位置偏移,不会脱离标准文档流,不影响其他元素布局。 - **position:absolute**:绝对定位。元素相对于最近的已定位祖先元素...

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

    然而,需要注意的是,`position:relative`可能会改变元素的大小计算方式,尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`,并且有绝对定位的子元素,那么子元素的定位...

    绝对定位+相对定位的妙用——一秒搞清子父级关系

    综上所述,理解并熟练运用相对定位和绝对定位,以及它们之间的子父级关系,能极大地提升网页设计的灵活性和精确性。通过实践和案例分析,可以更好地掌握这些技巧,从而创造出更加精致和动态的网页布局。

    divcss盒子之绝对定位和相对定位.docx

    定位主要包括静态定位、绝对定位和相对定位三种方式。 1. 静态定位(static):这是元素的默认定位方式,元素按照正常的文档流排列,不受left, right, top, bottom等属性的影响。 2. 绝对定位(absolute):绝对...

    css position: absolute、relative详解

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

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    div中的相对定位与绝对定位.pdf

    本文主要讨论的是CSS中的两种定位方式:相对定位和绝对定位,特别是在`div`元素中的应用。 1. 相对定位(relative) 相对定位允许元素相对于其原本在正常文档流中的位置进行偏移。当对一个元素设置`position: ...

    div中的相对定位与绝对定位.docx

    本篇文章主要探讨了`div`中的相对定位(`relative`)与绝对定位(`absolute`)的区别及其应用。 1. 相对定位(`position: relative;`) 相对定位保留了元素在正常文档流中的位置,元素的原始位置不会被改变,但它...

    css-绝对定位的参考对象

    绝对定位的核心在于其参考对象,即`position: absolute;`声明后,元素会相对于最近的非静态定位祖先元素(具有`position: relative;`, `absolute;`, 或 `fixed;`的元素)进行定位。如果没有这样的祖先,它将相对于根...

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

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

Global site tag (gtag.js) - Google Analytics