相对定位与绝对定位的理解

一、相对定位:如果对一个元素进行相对定位,它将出现在它所在的位置上,通过设置垂直或水平位置,
让这个元素“相对于”它的起点进行移动。默认相对值是body。注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。检查元素看body可知。
个人理解:这个相对是相对的元素本身,之所以设置是使得left,top等能起作用,并且使用relative任然
占据原来的空间,即从元素本来所存在的位置到元素移动的位置,那很多行里面都不会有其他的元素与他并列,即它所在的行不能再出现其他元素。

二、绝对定位:设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成
何种类型的框。
个人理解:元素位置相对于最近的已定位祖先元素, 如果元素没有已定位的祖先元素,它的位置相对于最初的包含块。祖先元素:即是
看与元素最近的div盒子是否使用相对定位或绝对定位。脱离文档流:如果有新的元素出现并且在同一个地方(如果是相对定位则根本
不可能出现覆盖),则会出现覆盖的情况,可以用index控制覆盖的顺序。

时间: 2024-10-29 19:08:19

相对定位与绝对定位的理解的相关文章

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学

div+css相对定位和绝对定位

今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置定位属性,则依据body对象左上角作为参考进行定位.绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持). 同时z-index仅能在定位元素上奏效!!! 相对定位(relative):对象不可层叠,依据left,ri

详解CSS的相对定位和绝对定位

原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 详解CSS的相对定位和绝对定位 感谢 3lian8 的投递 时间:2015-01-31 来源:cmsgood zcp CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100p

秒懂相对定位与绝对定位,【组合拳relative,absolute】 瞬间清醒有木有?

上文:组合拳 层级关系为: <div ----------- position:relative; 不是最近的祖先定位元素,不是参照物 <div----------没有设置为定位元素,不是参照物 <div-------- position:relative 参照物 <div box1 <div box2 --–position:absolute; top:50px; left:120px; <div box3 效果图: 为改变参照物(橘色框)后的效果 层级关系为: &l

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

CSS相对定位与绝对定位详解

相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: 值 描述 absolute 使元素绝对定位,相对于static定位以外的最近的一个祖先元素进行定位.元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. relative 使元素相对定位,相对于自己的正常位置进行定位. fixed 使元素绝对定位,相对于浏览器窗口进行定位.元素的位置通过 “lef

CSS定位(CSS定位概述、相对定位、绝对定位、浮动)

CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移. overflow 设置当元素的内容溢出其区域时发生的事情. clip 设置元素的

CSS中的相对定位和绝对定位

1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间, 绝对定位:position:absolute, 被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除. 2.父容器使用相对定位,子元素使用绝对定位后,这样的位置不再于浏览器左上角,而

css相对定位和绝对定位

<html> <head> <title>css相对定位和绝对定位</title> <style type = "text/css" > body,div { margin:0; padding:0; height:2000px; } #div1 {   width:200px; height:200px; background-color: red; position:absolute;  z-index:2; /* lef