absolute与relative的区别

最新推荐文章于 2023-05-24 22:16:01 发布
最新推荐文章于 2023-05-24 22:16:01 发布
阅读量983 收藏
点赞数
文章标签： layer object 工作 div ie layout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxzhq2002/article/details/2095406
版权

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
#Layer1 {
 width:100px;
 height:100px;
 z-index:3;
 position:absolute;
 background-color: #FF0000;
 top: 0px;
 left: 50px;
 padding-top: 10px;
 padding-left: 150px;
 margin: 50px;
}
#Layer2 {
 z-index:2;
 position:relative;
 background-color: #CCCCCC;
 left: 50px;
 top: 0px;
}
#Layer3 {
 z-index:1;
 position:relative;
 background-color: #0000FF;
 left: 50px;
 top: 0px;
}
-->
</style>
</head>
<body>

<p>123333333333333333333333333333333333444444444444</p>
<div id="Layer3">Layer3<br>
  Layer3<br>
  <div id="Layer2">Layer2<br>
    Layer2<br>
    <div id="Layer1">Layer1<br>
      Layer1<br>
      Layer1<br>
      Layer1<br>
    </div>
    Layer2<br>
    Layer2<br>
  </div>
  Layer3<br>
  Layer3<br>
</div>
</body>
</html>

 

 

===========================

sPositionString that specifies or receives one of the following values.
staticDefault. Object has no special positioning; it follows the layout rules of HTML.
absoluteObject is positioned relative to parent element's position—or to the body object if its parent element is not positioned—using the top and left properties.
relativeObject is positioned according to the normal flow, and then offset by the top and left properties.

statict 正常工作流，left, op失效，

absolute相对于parent元素，left, top有效,如果left, top没value,或叫null，则left,top，ie产生一个值，其值等于正常工作流时的top, left（如日期控件是display,其定义一般是当前元素的postion底部＋10，或mouse postion）

relative， 正常工作流，即上一次元素的，top. left有效

现在ie7已解决select的问题，这点与ff相近，box盒子定义也是如些，这点与ie6不同，以后再测试....

 padding-top: 10px;
 padding-left: 150px;
 margin: 50px;

借助dw可以清楚其值

cxzhq2002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Div CSS absolute与relative的区别小结
10-30
Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。
li标签的position:absolute与relative案例应用
09-25
本案例中涉及到的是`position`属性的两个值：`relative`和`absolute`，它们在li标签的应用中起到了决定性的作用。 首先，我们来看`position: relative;`。当一个元素的`position`属性设置为`relative`时，它会相...
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
absolute和relative的区别
m0_47843571的博客
10-19 5621
1,文档流不同 elative 不脱离文档流，absolute 脱离文档流。` 2,分级不同 1，elative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。 2，absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 3，定位不
相对定位(relative)和绝对定位(absolute)的区别
zhajiangmian_1998的博客
05-29 5971
今天来给大家分享一下html中相对定位(relative)和绝对定位(absolute)的区别：先来波理论解释吧！一：绝对定位  position：absolute绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5434
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
css position: absolute、relative详解
10-30
今天在看CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。
HTML的relative与absolute使用及区别详解
01-19
HTML的relative与absolute区别：说实话html这门语言算的上是这个世界上最简单的一门语言了，标签语言嘛，就是标签多了点英文单词超多，不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是...
关于CSS absolute与relative不得不说的话
09-22
下面小编就为大家带来一篇关于CSS absolute与relative不得不说的话。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
定位之——相对定位（relative）与绝对定位（absolute）
最新发布
weixin_y18485705761的博客
05-24 3076
对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。position 属性规定元素的定位类型。
position的值，以及absolute和relative的区别
My_Soul_的博客
12-30 1090
关于 relative 和 absolute 的区别，主要是它们的定位参照点不同。relative 元素的定位参照点是它在正常流中的位置，而 absolute 元素的定位参照点是最近的已定位父元素（如果没有已定位的父元素，则参照点是 initial containing block）。此外，absolute 元素会脱离正常文档流，而 relative 元素不会。
决定定位和相对定位的区别
gao_zhennan的博客
03-31 1284
前言：学过的好多知识经常是当时学会了、理解了，但是过一段时间不使用就会差不多忘记了，又要花费时间去重复学习。为了避免或者减少重复学习学过的知识，因此对学过的东西进行总结。本文基于“Absolute（绝对定位）与relative（相对定位）"展开，做出了部分修改和补充。 Position的属性值有： 1.     Absolute：绝对定位，是相对于
绝对定位与相对定位
kly_newera的博客
04-02 1234
1．定位的专业解释 (1)语法 position : static | absolute | fixed | relative (2) 说明 定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。其中，最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative）。绝对定位（absolu
定位absolute和relative的区别
qq_39261142的博客
05-06 452
正常情况的div排序： <body> <style> #A { background-color:mediumpurple; height: 100px; } #B_Father { background-color:#a1afc9; ...
CSS+DIV布局中absolute和relative区别
蓝天白云
04-03 4285
原文： http://developer.51cto.com/art/201009/225201.htm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值