今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

首先position:absolute|relative;

前者是绝对定位,后者是相对定位;

position属性的四个值:

static,relative,fixed,absolute;

重点重点重点:

相对定位元素经常用来作为绝对定位元素的容器块;

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

时间: 2024-10-27 01:19:23

今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;的相关文章

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

在网上看到的,最近遇到好几次,总结就是 当你发现某元素在IE6,7下面无法显示的时候,且这个元素是经过position absolute的,加之前后之类的有浮动,你就要考虑一下兄弟元素,有时候是前面,有时候是后面,加一个<div class="clearboth"></div> 今天早上重构一个机票订购页面的时候,为了配合JS特效所以需要写一个绝对定位浮动层,写完在测试的时候发现,在FF.ie8.ie7.op下都可以正常显示,可是到了IE6的时候,这个绝对定位浮

利用绝对定位和相对定位对CSS中区块进行位置调整

首先,我们需要明白相对定位和绝对定位的含义. 相对定位:就是设置一个参照物,其他元素或者区块相对于这个参照物进行偏移,而设置为相对定位的元素就是这个参照物. 绝对定位:绝对定位的偏移位置是相对于他的设置为相对定位的上级或者上上级,若这些都没有设置定位,则相对于BODY进行偏移,绝对定位不占位置. 以下是利用相对定位和绝对定位实现区块的位置调整,效果图如下: 代码如下: <!DOCTYPE html><html><head lang="en"> <

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

讨论CSS的绝对定位与相对定位

CSS 相对定位 设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方.如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动. #box_relative {

CSS的绝对定位和相对定位

css定位标签position包括两个值:relative(相对定位)和absolut(绝对定位),postion样式一般都是和top.bottom.left.right一起使用来确定一个标签的位置. 1.position:absolute(绝对定位): 标签的position被设置为absolute后,表示绝对定位,位置是从浏览器窗口的左上角算起,比如div:{position:absolute;top:100px;left:200px},表示此div距离浏览器窗口左边200px,距离顶部10

绝对定位和相对定位

绝对定位: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.他们之间不会相互影响,而会在同一位置层叠.理解:当给一个div设置绝对定位时,这个div就会漂浮在文档流之上,不受任何影响,以浏览器左上角为00点,设left和top便可在浏览器的任何位置漂浮 position:absolution;  要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absol

css中的绝对定位与相对定位

1.绝对定位 元素没有设定position属性,但依旧具有position属性,其值为static 绝对定位的元素从文档流中删除,并相对于其最近的position属性为absolute.relative.fixed的祖先元素定位,若没有这样的祖先元素,则根据浏览器定位,元素原来在文档流中的控件被关闭,其层叠通过z-index属性决定,此时对象不具有边距(margin) <div class="content"> <div class="redBlock&qu

绝对定位 position:absolute,相对定位 position:relative

<1> 当我们要使用绝对定位的时候,必须要有两个条件 1>必须给父元素加定位属性,一般建议使用 position:relative(即:给父元素设为相对定位); 2>给子元素,加绝对定位position:absolute(给子元素设置为绝对定位); 同时加方向属性(top ,left,rigth,bottom) 绝对定位是以父元素为基准点,进行定位(如果他没有父元素,或者它的父元素没有设置position:relative属性)它就会以<body>为基准点进行定位.绝对