两层容器的position 之间的关系

在HTML的CSS种，容器如DIV有三种position属性：static, relative,absolute。其中static为默认属性，relative意为相对父容器定位，absolute意为相对可定位的上层容器进行定位，这个上层容器不一定是父容器，若找不到可定位的上层容器，则会以document.body进行定位。

若容器套容器，它们之间如何相互作用？见下面的实验。

1、两级DIV定位实验

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>position test[relative + absolute模式]</title>
<style>
.div2 {
	position:absolute;right:50%;top:0%;
	border:solid 1px #0000ff;
 }

.div4 {
	position:relative;right:50%;top:0%;
	border:solid 1px #0000ff;
 } 

.div6 {
	position:relative;right:50%;top:0%;
	border:solid 1px #0000ff;
 }  

.div8 {
	position:absolute;right:50%;top:0%;
	border:solid 1px #0000ff;
 }  

.div10 {
	position:absolute;right:50%;top:0%;
	border:solid 1px #0000ff;
 }  

.div12 {
	position:relative;right:60;top:0%;
	border:solid 1px #0000ff;
 }
</style>
</head>

<body>
<p>
	<h1>position test</h1>
</p>
<div id="div" style="width:400;height:300;border:1px solid #ff0000;position:relative;">
1、外：relative，内：absolute，内DIV宽度等于文字宽度<br>
外：relative，内：absolute<br>
外：relative，内：absolute<br>
外：relative，内：absolute<br>
	<div class="div2" id="div2"> TEST IS OK!</div>
</div>

<div id="div3" style="width:400;height:300;border:1px solid #ff0000;position:relative;">
2、外：relative，内：relative，<br>
内DIV宽度等于父容器宽度<br>
	<div class="div4" id="div4"> TEST IS OK!</div>
</div>

<div id="div5" style="width:400;height:300;border:1px solid #ff0000;">
3、外：static，内：relative，<br>
内DIV宽度等于父容器宽度<br>
内DIV宽度等于父容器宽度<br>
	<div class="div6" id="div6"> TEST IS OK!</div>
</div>

<div id="div7" style="width:400;height:300;border:1px solid #ff0000;">
4、外：static，内：absolute，<br>
内DIV宽度等于文字宽度<br>
百分比以窗口大小为坐标<br>
	<div class="div8" id="div8"> TEST IS OK!</div>
</div>

<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555
<br>555555555555555555555555555555555555555555555555555555

<div id="div9" style="width:400;height:300;border:1px solid #ff0000;position:absolute;">
5、外：abslolute，内：absolute，<br>
内DIV宽度等于文字宽度<br>
百分比以父容器大小为坐标<br>
外DIV浮动<br>
	<div class="div10" id="div10"> TEST IS OK!</div>
</div>
<br>
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666
<br>6666666666666666666666666666666666666666666666666666666

<div id="div11" style="width:400;height:300;border:1px solid #ff0000;position:absolute;">
6、外：absolute，内：relative，<br>
内DIV宽度等于父容器宽度<br>
百分比以窗口大小为坐标<br>
外DIV浮动<br>
	<div class="div12" id="div12"> TEST IS OK!</div>
</div>

<p>关系表</p>

<p><font face="宋体">↑</font></p>
<script lang="javascript">
	//var x =(document.body.offsetWidth - document.getElementById('div2').offsetWidth)/2;
	//document.getElementById('div2').style.left = x;
</script>
<table border="1" width="57%" style="border-collapse: collapse">
	<tr>
		<td width="4%">　</td>
		<td width="12%" align="center"><font size="2">外</font></td>
		<td width="15%" align="center"><font size="2">内</font></td>
		<td width="16%" align="center"><span lang="zh-cn"><font size="2">内DIV宽度</font></span></td>
		<td width="145" align="center"><font size="2">百分比坐标</font></td>
	</tr>
	<tr>
		<td width="4%" align="center">1</td>
		<td width="12%"><font size="2">relative</font></td>
		<td width="15%"><font size="2">absolute</font></td>
		<td width="16%"><font size="2">文字宽度</font></td>
		<td width="145"><font size="2">父容器</font></td>
	</tr>
	<tr>
		<td width="4%" height="22" align="center">2</td>
		<td width="12%" height="22"><font size="2">relative</font></td>
		<td width="15%" height="22"><font size="2">relative</font></td>
		<td height="22" width="16%"><font size="2">父容器宽度</font></td>
		<td height="22" width="145"><font size="2">父容器</font></td>
	</tr>
	<tr>
		<td width="4%" align="center">3</td>
		<td width="12%"><font size="2">static</font></td>
		<td width="15%"><font size="2">relative</font></td>
		<td width="16%"><font size="2">父容器宽度</font></td>
		<td width="145"><font size="2">父容器</font></td>
	</tr>
	<tr>
		<td width="4%" align="center">4</td>
		<td width="12%"><font size="2">static</font></td>
		<td width="15%"><font size="2">absolute</font></td>
		<td width="16%"><font size="2">文字宽度</font></td>
		<td width="145"><font size="2">浏览器窗口</font></td>
	</tr>
	<tr>
		<td width="4%" align="center">5</td>
		<td width="12%"><font size="2">absolute</font></td>
		<td width="15%"><font size="2">absolute</font></td>
		<td width="16%"><font size="2">文字宽度</font></td>
		<td width="145"><font size="2">父容器</font></td>
	</tr>
	<tr>
		<td width="4%" align="center">6</td>
		<td width="12%"><font size="2">absolute</font></td>
		<td width="15%"><font size="2">relative</font></td>
		<td width="16%"><font size="2">父容器宽度</font></td>
		<td width="145"><font size="2">父容器</font></td>
	</tr>
	<tr>
		<td width="4%">　</td>
		<td width="12%">　</td>
		<td width="15%">　</td>
		<td width="16%">　</td>
		<td width="145">　</td>
	</tr>
	<tr>
		<td width="4%">　</td>
		<td colspan="4"><font size="2">结论：1、容器内子组件的宽度和定位属性在relative</font><span lang="zh-cn"><font size="2">下与父容器无关；</font></span><p>
		<font size="2">子组件position为absolute<span lang="zh-cn">时定位在父容器的</span>absolute<span lang="zh-cn">和</span>relative<span lang="zh-cn">下表现相同</span>,</font></p>
		<p><span lang="zh-cn"><font size="2">文字宽度属性与父容器无关。</font></span></p>
		<p><span lang="zh-cn"><font size="2">2、子组件为</font></span><font size="2">absolute</font><span lang="zh-cn"><font size="2">时，默认宽度均为文字宽度；子组件为relative时，默认宽度均为父容器宽度</font></span></td>
	</tr>
</table>
</body>

</html>

注：运行效果因网站代码的加工处理，不能直接在此完整体现，请将代码拷贝至浏览器中运行。

2、关系表

  外 内 内DIV宽度 百分比坐标
1 relative absolute 文字宽度 父容器
2 relative relative 父容器宽度 父容器
3 static relative 父容器宽度 父容器
4 static absolute 文字宽度 浏览器窗口
5 absolute absolute 文字宽度 父容器
6 absolute relative 父容器宽度 父容器
         
  结论：1、容器内子组件的宽度和定位属性在relative下与父容器无关；

子组件position为absolute时定位在父容器的absolute和relative下表现相同,

文字宽度属性与父容器无关。

2、子组件为absolute时，默认宽度均为文字宽度；子组件为relative时，默认宽度均为父容器宽度
时间： 2024-07-29 21:58:37

两层容器的position 之间的关系的相关文章

display与position之间的关系

以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height. relative : 原来是什么类型的依旧是什么类型. absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style=”position:absolute; width:100px; he

【总结整理】display与position之间的关系【较完整】（转）

以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height. relative : 原来是什么类型的依旧是什么类型. absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style="position:absolute; width:100px;

java.swing 容器与面板之间的关系以及正确使用方法

转载:别先生 http://www.cnblogs.com/biehongli/p/5749777.html package com.swing; import java.awt.Container; import java.awt.GridLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.WindowConstants; /**

NGUI的localPosition和Position之间的关系

假设有子节点为child, 父节点为parent, 且都是Transform类型. 则: child.localPosition = (child.position - parent.position) * k k = NGUI高度的一半 解释: NGUI高度的一半 如果设置的NGUI的高度为720, 那就是*360. 一般做NGUI都是高度固定, K会是一个固定值 如果你做的是宽度固定为W,  k可以这样计算出来 k = 0.5f * W * (float)Screen.height / (f

505，display，float，position之间的关系（有疑问）

(display属性设置元素如何显示) 如果display取值为none,那么position和float都不起作用,这种情况下元素不产生框 否则,如果position设置框是绝对定位,float的计算值就为none,display根据下面的表格进行调整 否则,float不是none,框是浮动的,display根据下表进行调整 否则,如果元素是根元素,display根据下表进行调整 其他情况下,display的值是指定值 总之:绝对定位,浮动,根元素都需要调整display 原文地址:https

servlet和web容器之间的关系

Java是一种动态加载和运行的语言.也就是说当应用程序持有一个类的地址(CLASSPATH)和名称(包名和类名)的情况下,可以在程序运行期 间任何时候加载这个类,并创建和使用该类的对象.Servlet就是基于这个机制与Web容器融合在一起的.目前已知的所有支持Java Servlet的Web容器都是采用Java开发的.当Web容器接收到来自客户端的请求信息之后,会根据URL中的Web元件地址信息到Servlet 队列中查找对应的Servlet对象,如果找到则直接使用,如果没有找到则加载对应的类,

实体之间的关系

拿学生信息举例 查询所有学生记录,包含年级名称 Student表实体类 Grade表实体类 Dao层 测试类 实体之间的关系分为四种 1.一对一 2.一对多 3.多对一 4.多对多 原文地址:https://www.cnblogs.com/wangdayexinyue/p/10945123.html

关于：无法定义这两个对象之间的关系，因为它们附加到不同的 ObjectContext 对象。个人解决方案

1 public class UserClazz 2 { 3 public User User{get;set;} 4 public IList<Product> ProductList{get;set;} 5 } 6 7 public class User 8 { 9 public IList<Product> ProductList{get;set;} 10 public IList<UserClazz> UserClazzList{get;set;} 11 } 1

Android Framework应用框架层和HAL硬件抽象层以及Linux Kernel底层之间的关系

Android应用框架层和硬件抽象层以及底层之间的关系 1. JNI技术: (1).JNI技术简单的说就是在本地Java语言声明本地方法和加载动态链接库(.so文件) (2).动态链接库(.so文件)是由NDK编译C/C++文件而成的. 2. HAL层开发: (1).HAL是Hardware Abstraction Layer的简称.也称为硬件抽象层. (2).硬件访问服务是在Framework层实现的. (3).硬件访问服务是用Java语言实现的,硬件抽象层是用C++语言编写的.因此硬件访问服