绝对定位(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. Java 经典笔试题

    这些题目对我的笔试帮助很大,有需要的朋友都可以来看看,在笔试中能遇到的题目基本上下面都会出现,虽然形式不同,当考察的基本的知识点还是相同的. 在分析中肯定有不足和谬误的地方还请大虾们能够给予及时的纠正 ...

  2. 洛谷——P2196 挖地雷

    题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...

  3. spring与事务管理

    就我接触到的事务,使用最多的事务管理器是JDBC事务管理器.现在就记录下在spring中是如何使用JDBC事务管理器 1)在spring中配置事务管理器 <!-- JDBC事务 -->   ...

  4. 利用例子来理解spring的面向切面编程(使用@Aspect)

    上篇的例子,自动装配和自动检测Bean是使用注解的方式处理的,而面向切面编程是使用aop标签处理的,给我感觉就像中西医参合一样. 现在就来优化优化,全部使用注解的方式处理. 1.工程图:

  5. [CQOI2018] 社交网络

    题目背景 当今社会,在社交网络上看朋友的消息已经成为许多人生活的一部分.通常,一个用户在社交网络上发布一条消息(例如微博.状态.Tweet等) 后,他的好友们也可以看见这条消息,并可能转发.转发的消息 ...

  6. see

    Description 问从点(0,0)能看到点(0,0)和(n,n)之间的矩形的多少个整数点,看到(x,y)代表点(0,0)和点(x,y)间没有其他整数点,如看不到(2,4)因为中间有点(1,2) ...

  7. 【spring mvc】后台的API,测试中,总提示接口实体的某一个字段不能为null,但是明明给值了还提示不能为空

    实体是这三个字段 接口的实现类Controller 前台测试给值 依旧报错 解决方法: 需要添加@RequestBody注解

  8. mysql数据库连接状态,不要做修改数据库表结构的操作;数据库迁移操作;

    在开发过程中,python的flask框架使用sqlalmysql连接mysql数据库. 在程序连接数据量过程中,不要修改数据表的结构.比如在连接状态中使用下面的软件修改数据表结构,这个软件立即就会卡 ...

  9. 上传图片/文件到server

    package yao.camera.util; import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; impo ...

  10. Eoeclient源代码分析---SlidingMenu的使用

    Eoeclient源代码分析及代码凝视 使用滑动菜单SlidingMenu,单击滑动菜单的不同选项,能够通过ViewPager和PagerIndicator显示相应的数据内容. 0  BaseSlid ...