绝对定位(absolute),作用是将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

注意:必须加left,right,top, bottom等值才能用效果.如: position: absolute; top:10px; 必须要加top才能有效.

position:fixed 相对于窗口的固定定位,这个会随周围的移动而移动.但给top,left ,right.等无作用.

position:relative 相对定位
  所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置.不会随别的移动而影响.

绝对定位(absolute)的更多相关文章

  1. div+Css绝对定位(absolute)和相对定位(relative)的总结

    1.没有外Div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上 3.若父Div没有设置定位,子Di ...

  2. 【随笔】关于绝对定位absolute相对于父元素定位的问题

    绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...

  3. 【CSS】 布局之浮动float和绝对定位absolute的选择

    浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位 ...

  4. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  5. 绝对定位( Absolute positioning )

    绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或 ...

  6. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  7. 深入理解CSS绝对定位absolute

    前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节 定义 当元素绝对定 ...

  8. 相对定位relative与绝对定位absolute

    relative:相对定位,并没有脱离原来文档流,依然在原来的位置上,可以通过设置left,top,来设置自己的偏移量,但是它依然占据自己原来的位置,偏移的位置会遮盖其他的元素 absolute:绝对 ...

  9. html/css中相对定位relative和绝对定位absolute的用法

    一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...

  10. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

随机推荐

  1. 洛谷——P2149 [SDOI2009]Elaxia的路线

    P2149 [SDOI2009]Elaxia的路线 题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每 ...

  2. 邁向IT專家成功之路的三十則鐵律 鐵律十五:IT人生活之道-赤子之心

    人的年齡與身體可以因歲月的無情不斷老化,但我們的這一顆心可千萬不要跟著老化.身為IT工作者的我們,每天除了要面對那死板僵硬的電腦挑戰之外,可能還要面臨許多人事方面的紛擾.這時候如果在平日的生活之中,仍 ...

  3. 【Todo】Java学习路线(方向指导)

    在网上搜了下Java学习路线(关键词:学习,因为众所周知,实践出牛人,在平时工作不怎么深入的情况下,才强调学习的方向的重要性 ^_^) 发现下面知乎这个回答写的真好.mark如下: https://w ...

  4. 解决Sophos UTM 9防火墙上的“根分区填满”问题

    Resolving 'Root Partition Is Filling Up' Issue on Sophos UTM Firewall 收到“Sophos UTM 9”防火墻的“根分區填满”问题的 ...

  5. 一起talk C栗子吧(第八十四回:C语言实例--使用信号进行进程间通信一)

    各位看官们,大家好,上一回中咱们说的是进程间通信的样例.这一回咱们说的样例是:使用信号进行进程间通信.闲话休提,言归正转. 让我们一起talk C栗子吧! 我们在上一回中提到过进程之间通信须要解决的三 ...

  6. CCNP路由实验之十二 MPLS

     个.第3个数据包„„同样的操作.包含查询路由表.重写MAC地址,CRC校验等. 系列路由器.或者12000系列路由器. Netflow switching 通过一种标准的交换机制,处理了流的第一 ...

  7. WMS8_条码界面操作简要说明(包装作业)

    说明:条码界面的主要用途是包装作业 这个客户端,完全是JS实现的     可以从 All operation看板视图 Picking的表单视图                 All operatio ...

  8. Perl图书的一些体会

    近期,由于项目须要.又又一次将Perl学习起来. Perl老实说.让我又爱又恨. 爱它.是由于自己写代码的确非常爽. 是代码最少.速度最快的语言. 恨是由于看别人的代码实在太累了. 但,整体体会,在文 ...

  9. Linux下查看系统CPU个数、核心数、线程数

    1.查看物理CPU个数 (env) root@vmware01:~# grep 'physical id' /proc/cpuinfo physical physical physical physi ...

  10. 【TensorFlow-windows】(三) 多层感知器进行手写数字识别(mnist)

    主要内容: 1.基于多层感知器的mnist手写数字识别(代码注释) 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_64. ...