相对定位和绝对定位

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7
 8 <body>
 9
10 <div class="bbb"><div class="aaa"></div></div>
11
12 <style>
13
14 .aaa
15 {
16     width:100px;
17     height:50px;
18     background-color:#F00;
19     position:relative;
20     left:300px;
21
22 }
23
24 .bbb
25 {
26     width:500px;
27     height:300px;
28     background-color:#0F0;
29     position:absolute;
30 }
31
32 </style>
33 </body>
34 </html>

时间: 2024-08-24 14:02:11

相对定位和绝对定位的相关文章

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

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

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

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

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

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

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

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

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

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

详解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

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

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

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

辛星和你彻底搞清CSS中的相对定位和绝对定位

前面我在解读CSS中也说过了关于相对定位和绝对定位的问题,无奈还是有些童鞋表示迷茫,于是另开一篇博客,来详细解读相对定位和绝对定位,希望能够以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为相对定位的元素会偏移某个距离,元素仍然保持原来的样式,它会保留该HTML元素的空间,比如我们看如下代码: .demo{ position: relative; width:50px; height: 50px; left:50px; } 它会出现在相对原来的地方向右50px的地方,而它原来所在的地方

相对定位vs绝对定位

<!-- -->相对定位,position: relative; 它会,相对它原来的位置的坐标的左上角,进行偏移.同时,它原来的位置会被保留. (相对定位的html容器,它虽然已经脱离了普通的文档流,但它依然被视为普通文档流定位的一部分.) 口语化的描述,"我人不在这,但位置你得给我留着". <!-- --> 绝对定位,position:absolute; 它会,相对于整个文档的左上角原点的坐标,进行偏移.同时,它原来的位置,不会被保留. (就是被添加了绝对定位