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

这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上 B不同点: absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口. 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的. 典型应用案例: 加了遮罩的居中弹窗,假如有很多屏,就得使用fixed,不然向下滚动弹窗和遮罩不会跟着走. <input type="button"…

【对比分析四】position的absolute与fixed共同点与不同点

共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上不同点: absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口. 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的. position :规定元素的定位类型. 任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 值描述 abs…

position的absolute与fixed，absolute与relative共同点与不同点

absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上不同点: absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口. 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的. absolute与relative 不同点: absolute的没有设position的父级元素就参照浏览器左上角. relative参照父级元素原始点,无父级参…

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

static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index进行层次分级. CSS2.0 HandBook上的解释: 设置此属性值为absolute 会将对象脱离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外边距( m…

css的position中absolute和fixed的区别

fixed:固定定位 absolute:绝对定位区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动常用场合: 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 ....................... 我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed. 都是绝对定位,二者有一致性,也有不同点.那么二者的…

css position 属性 (absolute 和fixed 区别)

在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. static 默认值,元素出现在正常的流中,忽略 (TRBL)和z-index的值.请参照下面的例子,div1由于position的值为static,所以top,left 没有起作用. <!Doctype html> <meta charset="utf-8"> &l…

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

1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元素可以使用的顶部top,底部bottom,左侧left和右侧right属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. 2 [position四大值介绍] 2-1[static 定位] 解释:HTML元素的默认值,即没有定位,元素出现在正…

position定位-absolute与fixed

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

CSS position relative absolute fixed

position属性absolute与relative 详解最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么…

当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？

position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定位,而初始包含块并不是以<html>或<body>进行定位的.w3c关于包含块及初始包含块的定义我们可以做一下测试: <!DOCTYPE html> <html lang="en"> <head> <meta charse…

position属性absolute与relative 详解

最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地…

position之absolute与relative 详解

absolute:绝对定位: relative:相对定位: 唉,以前只是知是知道这两个单词的汉语意思,然后呢,,,怎么用...也是摸凌两可的用.终于抽出时间来看看了: 1.绝对定位:absulute Absolute ---- position:absolute: 表示绝对定位,位置将依据浏览器左上角开始计算,配合TOP.RIGHT.BOTTOM.LEFT进行定位,在没有设定TRBL的情况下,默认依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定position属性,那么当前的ab…

position:absolute/relative/fixed小结

1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位.当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏. 2.相对定位:positio…

[转]关于position 的 static、relative、absolute、fixed、inherit

本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static. relative 没有脱离布局流,此时可以使用 top.right.bottom.left 属性. top 和 bottom 共存时,使用 top 值,忽略 bott…

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层…

细谈position属性:static、fixed、relative与absolute

学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右来布局. 而脱离文档流,就是说,将元素从普通的布局排版中拿走.其他盒子在定位的时候,无视这个元素的存在而进行定位. 现在,谈谈position属性的这些值都有怎样的特性. 一.position:static CSS定位中的默认值.当元素不设定任何position属性时,默认用static进行定位.不…

position 有五个值：static、relative、absolute、fixed、inherit。

position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static. relative 没有脱离布局流,此时可以使用 top.right.bottom.left 属性. top 和 bottom 共存时,使用 top 值,忽略 bottom 值: left 和 right 共存时,使用 left 值,忽略 right 值…

[转]Html position（static、relative、absolute、fixed）

转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性.<div id="parent"> <div id="sub1">sub1</id> <div id="sub2">s…

CSS中Position属性static、absolute、fixed、relative

在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relative. ◆position:static 无定位元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. 该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影…

前端~定位属性position（relative、absolute、fixed）的分析

前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物) absolute: 随参照物的变化而变化 fixed:固定 2,position 是否会被内部的子元素继承? 会,一般不能继承的属性,像盒模型,border.margin.padding等注意事项:当使用了滚动组件(例如better-scroll)时,跟better…

position 的值absolute、fixed、relative和static的定位原点是什么

position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点. fixed(老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位. relative 生成相对定位的元素,相对于其元素本身所在正常位置进行定位. static 默认值,没有定位,元素出现…

absolute vs fixed

<!DOCTYPE html> <html> <head> <title>absolute和fixed的区别</title> <style type="text/css"> body{color:#fff;} #html{ position:relative;width:778px; height:1000px; border:1px solid #0000FF;} #fixed,#absolute{width:2…

CSS+DIV定位分析(relative,absolute,static,fixed)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 1.官方定义先看下各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位的元素,通过top,bottom,left,right的设…

怕忘记了CSS中position的absolute和relative用法

CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中position主要用于HTML元素的定位,在实际设计中还是非常有用的.但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用,非常打脑壳不管再咋个打脑壳,大家首要的还是记住position的几个属性值 static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,r…

CSS position绝对定位absolute relative

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构 - TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对…

导航position：absolute

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航position:absolute</title> <style type="text/css">…

CSS中应用position的absolute和relative的属性制作浮动层

我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div> 要实现的是son层的浮动. 刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注. 但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位. 只要把本元素的position属性设置为:absolute,然后把父元素的positi…

position：absolute 的深入探讨

position:absolute 参考谁进行定位的问题.之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属性的时候,该元素的position:absolute会参考body进行定位. 换句话说是如果父级设置了position(且值为非static),参照(最近的)父级的内容区域的左上角为初始点,结合top left right bottom 进行定位: 如果没有设置,往其父级继续寻找,直到找到为止,如果一直没有,则相对与body进行定位(我猜想是这样的,但是…

position属性absolute（绝对定位），relatve(相对定位)

position:absolute这个是绝对定位:是相对于浏览器的定位. position:relative这个是相对定位:是居于上一个流体而言…

CSS position属性absolute relative等五个值的解释

DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构 - TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute :…

【position的absolute与fixed共同点与不同点】的更多相关文章