【关于absolute 和 relative 定位的定义】的更多相关文章

关于absolute 和 relative 定位的定义

absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们中国人的理解观念,这个其实是相对定位,是脱离文档流的.用了abolute属性,原有float属性将失效:relative的英文意思是相对的意思,实际上是相对于对象当前位置的定位.而且是不脱离文档流的,就算用top.lef.bottom.right或margin将其移动位置,它也会在原来的文档流中占有…

focus、click、blur、display、float、border、absolute、relative、fixed

onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占据一行,与前后不在同一行 block:块对象的默认值.对象之后添加新行.  none:隐藏对象.隐藏的对象不占据物理空间. inline:内联对象的默认值.对象后不添加行. display:none不占据页面空间 visibility:hidden 占据页面空间 type="hidden"…

定位 absolute和relative比较

absolute:脱离原来位置定位.是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对文档进行定位 relative:保留原来位置进行定位,相对于自己原来的位置进行定位 下面举两个例子 1. <style> *{ margin:0; padding:0; } .box1{ width:100px; height:100px; background-color:#000; position:absolute; } .box2{ width:150px; height:150px…

Position属性四个值：static、fixed、absolute和relative的区别和用法

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

position属性absolute与relative 详解

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

position属性absolute和relative理解

relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父元素进行定位,否则相对于body坐标原点进行定位.而fixed属性则是相对于可视窗口进行定位.…

CSS+DIV布局中absolute和relative区别

原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一直对position的四个属性值relative,ab…

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

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

CSS中position的absolute和relative用法

static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html> relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动 记住如…

css中的position 的absolute和relative的区别（转）

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档…

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

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

css absolute与relative的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

Div CSS absolute与relative的区别小结

absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“内容区域原始点”为原始点,上面例子红色部分(父级黄色区域有 Padding 属性,“坐标原始点”和“内容区域原始点”不一样). 2. 有设定 Top.Right.Bottom.Left 的情况,这里又分了两种情况如下: (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原…

css position: absolute、relative详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab…

absolute和relative的几个Demo

这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl…

css position 应用（absolute和relative用法）

1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位.可以选取具有定位的父级对象(下文将说到relative与absolute的结合使用)或者body坐标原点进行定位,也可以通过z-index进行层次分级.absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的,当设定TRBL值后则根据浏览器的左上角作为原始点.具体案例如下: <!DOC…

CSS position: absolute、relative定位问题详解

CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠. TRBL属性(TOP.RIGHT.BOTTOM.LEFT) 当设定position:absolute  如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位  如果父级(无限)设定p…

position: absolute、relative的问题

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute .否则上述属性会使用他们的默…

css position static | absolute | fixed | relative

<div id="bigbox1">    <div id="box1" class="box">box1</div>    <div id="box2" class="box">box2</div>    <div id="box3" class="box">box3</div>  …

css-关于absolute和relative的一些笔记

根据张鑫旭老师的博客,一些笔记留作备忘 1.position:absolute 具有包裹性--包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度.float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签. 具有破坏性,会使父元素高宽塌陷. 有评论说absolute不会使宽度塌陷,实验后确实如此. absolute不利于…

position之absolute与relative 详解

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

css 布局absolute与relative的区别

absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relative:当使用时,表示在文档中确实占有一定的空间,在不设置任何方位值时,会出现在应该出现的位置(空间),当设置了方位值之后,会在应该出现的位置上进行上.下.左.右的形状位移,而实际上还是占有应该占有的位置(空间)…

CSS中position属性 （absolute，relative，static，fixed）

只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. 2.Fixed属性值是相对于浏览器窗口定位的(及视口坐标),设置该属性后的元素是独立的,他脱离文档流,当拖动滚动轴时该元素在浏览器窗口中的位置不会发生变化.时 3.所有的父级元素均没有设置position(除了static属性值以外)时,则当某个子元素position:absolute时,其top…

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

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

由一位坛友的布局想到的定位问题：absolute和relative

坛友的问题和相关代码如下: 看看下面的代码.运行有问题.但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left;”就正常了,我想不明白为什么? 1: <div class="shayne">逆光国际逆光国际逆光国际</div> 2: <script language="javascript"> 3: //创建一个showhidediv的方法,直…

position属性absolute与relative(转)

每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认 依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位, 位置将由TRBL决定.…

HTML静态网页的格式与布局（position：（fixed、absolute、relative）、分层、float（left、right））

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或relative):那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素). 2.外层有position:absolute(或relative):那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素). 示例: 三.posit…

position属性absolute与relative 的区别

连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定posi…

CSS absolute与relative不得不说的故事

写在开篇: absolute说:“relative,我这辈子都不想看见你!” 为什么呢?它们明明那么相亲相爱,形影不离,这之中到底发生了什么不为人知的故事,竟然让absolute如此讨厌relative? 要想找到问题的答案,请跟我来... relative对absolute的限制之一 absolute,拥有top.right.bottom.left四项技能,从此天高任鸟飞,海阔任鱼跃:本来想去哪儿就去哪儿,自由自在,生活是那么地美好. 直到有一天,在出去玩的路上,遇到一个relative,跳出…

HTML中的布局方式：absolute、relative、fixed、static

在CSS中关于定位的内容是: position:relative | absolute | static | fixed     static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,这是默认值.    relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级.    absolute(绝对定位) 脱离文档流,通过 top,bottom,left…