共同点:

(1) 改变行内元素的呈现方式,display被置为block;

(2) 让元素脱离普通流,不占据空间;

(3) 默认会覆盖到非定位元素上

不同点:

absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。

当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

position :规定元素的定位类型。

任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

描述

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit

规定应该从父元素继承 position 属性的值。

【对比分析四】position的absolute与fixed共同点与不同点的更多相关文章

  1. position的absolute与fixed共同点与不同点

    这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上   B不同点: absolute ...

  2. position的absolute与fixed,absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  3. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  4. css总结1:position定位:absolute/relative/fixed

    1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...

  5. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  6. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

  7. position定位-absolute与fixed

    1. absolute 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 2. fixed 生成绝对定位元素,相对于浏览器窗口进行定位.

  8. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  9. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

随机推荐

  1. django 分页和中间件

    分页 Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views h ...

  2. linux redis 启动 overcommit_memory

    Redis在启动时不成功, 查看日志发现如下警告: WARNING overcommit_memory is set to 0! Background save may fail under low ...

  3. leetcode215

    class Solution { public: int findKthLargest(vector<int>& nums, int k) { sort(nums.begin(), ...

  4. python 爬虫启航

    1. 使用excel(简单使用) 数据- 自网站-导入 2.you-get python爬虫入门 1.环境配置 python,request,lxml 2.原理 爬虫的框架如下: 1.挑选种子URL: ...

  5. 为Firefox浏览器安装Firebug插件

    一.确保联网 二.打开Firefox 三.菜单:工具 -> 附加组件 显示附加组件管理器界面,点扩展 在搜索框输入firebug,搜,在搜索结果列表中找到Firebug项,安装 安装进度 安装完 ...

  6. sybase-sql语法-replace用法

    1.去空格 update hyl_temp02 --去空格 set acc_nbr=replace(acc_nbr,' ',''); commit; 2.去回车 update hyl_temp02 - ...

  7. sendmail报错Relaying denied

    配置好sendmail后,使用php的mail()发送邮件,出现 SMTP server response: 550 5.7.1 Relaying denied. IP name lookup fai ...

  8. OpenStack 安装:基本环境准备

    刚刚学完openstack,这几篇文章就算对过去课程的一个总结吧. 首先说说基本的结构:在一台Dell的workstation上面安装了VMware,在VMware上面安装两台CentOS,现在给每台 ...

  9. 初学c# -- 学习笔记 小结

    学了到了好些东西, 做了一些练习. 一.C# winform Socket 1.程序主要部分只是用了 Panel.Picturebox.Label.RicheditBox四个组件,滚动条.编辑框什么的 ...

  10. 【VBA】セールの最初起動時、VBAを自動的に実行方法

    方法一 セールの「ThisWorkbook」にて.「Workbook」の「Open」関数にて.ロジックを追加する Private Sub Workbook_Open() Msgbox "He ...