绝对定位是指原来的占位空间而言
如果绝对定位被指定,那么它将失去占位空间
如果他的top和left未指定大小,那么他将是原来的占位空间的位
置。但是对于其他元素来说,其他元素会认为他的占位空间已消
失。
他的参照物是离他最近的指定定位的父级元素
例如
<div ——————————— position:relative;最近的祖先
定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px;
left:120px;
<div box3
此情况,margin-bottom 和margin-right的值不再对文档流中的
元素产生影响,因为该元素已经脱离了文档流。另外,不管它的
祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参
照物。
例如
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px;
margin-left:120px;
<div box3
相对定位是相对原来占位空间而言;
总结:
相对定位的元素不会脱离文档流,占用文档流的空间,Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流,偏移不影响文档流中的其它元素,Left; Right; Top和Bottom属性与margin属性混合使用,偏移方向相同值累加,方向相反,margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。
分享到:
相关推荐
CSS下盒子模型定位浅析.pdf
CSS+DIV定位浅析:relative,absolute,static,fixed。
css的绝对定位,相对定位,浮动的规则。等等等
div+css 定位浅析
CSS相对定位和绝对定位,让你轻松了解css的定位知识和相关的内容
如果想要将绝对定位的元素包含在一个特定的父元素中,请确保将父元素的位置值设置为相对。正如上面所提到的,没有指定值的相对定位不会影响元素,除非给元素指定一个位置。子元素将使用该位置来计算出自己的位置值。...
CSS 绝对定位属性absolute用法初探
在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个CSS样式的时候,不需要对每一个项都进行设置,需要什么效果,选择相应的项...
博文链接:https://kino.iteye.com/blog/205528
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
CSS+Js定位与相对定位
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。 CSS网页布局教程:...
HTML中的css样式 的定位 绝对定位和 相对定位
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...
CSS_样式定位图
如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
css定位 html元素定位 static relative absolute fixed详细讲解,带图。
css浮动和定位
主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置,本文首先解释了常见的电脑分辨率,为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,再去使用绝对定位,具体操作步骤大家可查看下文的...