相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置。

相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种:

描述
absolute 使元素绝对定位,相对于static定位以外的最近的一个祖先元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 使元素相对定位,相对于自己的正常位置进行定位。
fixed 使元素绝对定位,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

  注:对于html的标准流(文档流)和浏览器怎么渲染各个DOM元素等底层知识,我不怎么清楚,下面的理解方式不一定正确,仅供参考。

  • 相对定位: position: relative

  

  该元素仍会呆在原来的位置,只不过通过top left等以其初始位置未起点移动。

  无论是否位移,相对定位的元素仍会在文档流中占用初始的空间。因此这样平移元素会导致它遮挡其他元素。

  相对定位总结:

  1. 相对定位的元素的参考对象是自己,即自己原来的所在位置(自己原来左上角作为坐标系的原点)。
  2. 相对定位移动后,之前的位置依旧保留,其他元素并不会占用。
  3. 相对定位后,有可能导致元素重叠。

  

  • 绝对定位:position: absolute

  绝对定位会把元素拿出文件流,因此就不会再占用原来的空间。与此同时,文档流中的其他元素会重新定位,仿佛绝对定位的那个元素从来没有出现过一样。因此元素可以覆盖标准流中的元素,也可以通过z-index设置层叠次序,z-index值越大越靠上层。如果把页面比作高楼,正常的元素都是在1层,绝对定位的元素在2层及以上(也可为负数),z-index越大所在层越高,越难被其他元素覆盖。

  元素定位后会生成一个块级框,而不论它在正常流中生成何种框。

  绝对定位的盒子脱离了常规文档流,因此很难用他吗构建视口宽度和内容长度变化而变化的自适应或者响应式布局

  绝对定位的元素的位置相对于最近的已定位祖先元素,并且position不是static,而是absolute或者relative,如果有就按照父元素左上角作为参考点,如果没有则再找祖父元素、曾祖父元素、高祖父元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

  

 
描述

CSS相对定位与绝对定位详解的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  3. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  4. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  5. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  6. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  7. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  8. [TimLinux] CSS float和position详解

    1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...

  9. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

随机推荐

  1. 九大内置对象 and HTTP略微的个人见解

    jsp 中九大内置对象: 请求对象:request      输出对象:out         响应对象:response      应用程序对象:application      会话对象:sess ...

  2. js-dialog

    依赖 jquery.js dialog.js dialog-plus.js ui-dialog.css 实例 <!DOCTYPE html> <html> <head&g ...

  3. Mysql安装后在服务里找不到和服务启动不起来的解决方法

    一,在安装完Mysql数据库后,发现在控制面板->管理->服务中找不到Mysql的服务启动 解决方法如下:开启命令行,按照如下步骤即可: 1.进入到mysql的安装包,在bin里执行:my ...

  4. C++学习笔记-继承中的构造与析构

    C++存在构造函数与析构函数,继承中也存在构造和析构函数.继承中的构造和析构函数与普通的构造析构有细微差别. 赋值兼容性原则 #include "iostream" using n ...

  5. 华为模拟器eNSP基本命令

    华为模拟器eNSP常用命令 本文转自:https://blog.csdn.net/Key_book/article/details/80542264 路由器命令行常用命令: 1. system-vie ...

  6. android简易计算器

    activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...

  7. 企业场景-网站目录安全权限深度讲解及umask知识

    站点目录的文件和目录给什么权限: 默认权限是安全权限的临界点,工作中尽量给这个临界点,或者小于临界点,不要大于临界点权限. 默认权限分配的命令 umask 在linux下文件的默认权限是由umask值 ...

  8. provider: Shared Memory Provider, error: 0 - No process is on the other end of the pipe.

    通常情况下,要解决这个,你去SQL Server配置管理器(SSCM)和: [1]在SSCM中设置 [1.1]确保共享内存协议启用 [1.2]确保命名管道协议 [1.3]确保TCP / IP被启用,和 ...

  9. Centos yum 安装 rabbitmq-server

    安装rabbitmq-server yum install -y rabbitmq-server   开启后台管理 rabbitmq-plugins enable rabbitmq_managemen ...

  10. java8 List对象集合去重

    //测试数据 WaterMeter w0 = new WaterMeter(); WaterMeter w1 = new WaterMeter(); WaterMeter w2 = new Water ...