两层容器的position 之间的关系

最新推荐文章于 2023-04-11 16:51:15 发布
最新推荐文章于 2023-04-11 16:51:15 发布
阅读量2.5k 收藏
点赞数
分类专栏： JavaScript JavaScript组件开发 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongweigg/article/details/39230451
版权

在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宽度百分比坐标
1relativeabsolute文字宽度父容器
2relativerelative父容器宽度父容器
3staticrelative父容器宽度父容器
4staticabsolute文字宽度浏览器窗口
5absoluteabsolute文字宽度父容器
6absoluterelative父容器宽度父容器
     
 结论：1、容器内子组件的宽度和定位属性在relative下与父容器无关；

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

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

2、子组件为absolute时，默认宽度均为文字宽度；子组件为relative时，默认宽度均为父容器宽度


hongweigg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
position四个属性值的关系
weixin_30533797的博客
07-24 99
我在以前的公司，并不怎么用position这个属性，只是在写一些特殊效果的时候才用绝对定位。这就导致我对这个属性很不理解。今天有空，百度学习了一下。留下下面的文字 position的四个属性值： relative ，absolute ，fixed，static（画外音：inherit其实也是，不过今天不怎么说他~） 写个小小的页面： <html><head> ...
position的应用(双层背景，靠底边布局)
younger_z的专栏
08-22 709
背景 Div的应用，以及  div使用下对齐用法：
两个嵌套的div，position都是absolute ,子div没置top属性，那么这个top是相对于父元素的哪个位置定位的？
m0_63822592的博客
11-18 349
答案是：顶端边缘。
同一级HTML,html中多个div嵌套时div在上一级中的相对位置的设置
weixin_39630735的博客
06-04 745
在利用div+css进行布局时，常常被div的位置弄的焦头烂额，其实只要了解了div的position属性就可以了position的四种取值的四种取值的四种取值的四种取值static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top...
通过设置CSS中的position属性来固定层的位置
09-03
5. 解决分辨率差异：对于绝对定位可能导致的在不同分辨率下显示不一致的问题，可以使用相对定位的容器来包裹绝对定位的元素，通过调整容器的位置来适应不同分辨率。 总之，理解并熟练运用CSS中的`position`属性，...
position:relative/absolute无法冲破的等级
10-31
这是因为当两个元素的`position`都为`relative`或`absolute`时，它们之间的层级关系主要由它们在文档中的先后顺序决定，而不是由`z-index`值决定。具体来说，对于同级元素而言，后来者会覆盖前者。 #### 解决方案 ...
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
css层与层的重叠
04-10
假设我们要在一个页面上放置两个层，其中一个层需要始终位于另一个层之上。 1. **HTML结构**： ```html 这是第一层 这是第二层 ``` 2. **CSS样式**： ```css #content1 { height: 200px; width: 200px; ...
css照片有如层叠效果的实现方法
09-24
在这个例子中，有两个照片元素`.photo1`和`.photo2`，它们都设置了绝对定位，并且嵌套在一个具有相对定位的容器`.container`内。`.photo2`的`z-index`高于`.photo1`，所以它会覆盖`.photo1`。同时，`.photo2`还添加...
div的position属性
11-23
div的position属性详细讲解 1.流动模型 （块元素，内联元素） 2.浮动模型 （float:） 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } 效果如下： 层模型--相对定位 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } 效果图： 层模型--固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。 效果见代码：：： relative样式 #div1{ width:300px; height:200px; border:2px red italic; position:fixed; bottom:0; right:0; 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范： 1、参照定位的元素必须是相对定位元素的前辈元素： 相对参照元素进行定位 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
DIV布局之position详解
weixin_34191845的博客
06-13 573
相对定位和绝对定位 定位标签：position 包含属性：relative（相对） absolute（绝对） 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框） 2.positi...
DIV position属性
yanzhibo的专栏IlgawME)Y*Ml
01-20 9189
DIV定位，position属性 absolute ：绝对定位  位置相对于文档流的左上角，会脱离文档流，飘起来。 配合top、right、bottom、left使用。 有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其position是absolute或fixed或relative。如果没有这个
DIV中position的5个属性值
长空一笑的博客
02-26 1865
position有5种属性值：static, relative, absolute, fixed, inherit一、默认定位static： position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。二、相对定位relative： 1、relative 就是相对元素static定位时的位置进行偏移，如果不指定top，right，bottom，left的值，其位置是没
div 的position属性
weixin_30608131的博客
05-30 354
定位标签：position包含属性：relative（相对） absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（相对定位时，始终在文档流中。因此，移动元素不会导致它覆盖其他框） 2.position:absolute; 表示绝对定位，位置将依据浏览...
【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-11 1970
一、绝对定位 二、标准流下的父容器与子元素关系 1、标准流下父容器与子容器代码 2、移动父容器后的效果 三、子元素设置绝对定位与父容器是否有定位的效果对比 1、父容器没有定位的情况下为子容器添加定位 2、父容器有定位的情况下为子容器添加定位 3、父容器没有定位爷爷容器有定位的情况
CSS之定位position(子绝父相）
weixin_50119334的博客
09-20 2293
CSS之定位 定位与浮动的区别： 浮动：可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 定位：可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子 定位的组成 定位=定位模式+边偏移 定位模式 position 选择器 {position : 属性值；} position有四个属性值： 1.**static：静态定位，**没有特殊的定位规则，遵循正常的文档流对象（极少使用） 2 .relative：相对定位，相对于元素自身进行定位（参照物为元素原来的位置） //
lxml结合xpath注意事项
jason的博客
07-19 226
1.使用Xpath语法，应该使用Element.xpath方法，来执行xpath选择，示例代码如下： trs = html.xpath("//tr[position()>2]") xpath函数返回的永远是一个列表 2.获取某个标签的属性： href = html.xpath("//a/@href") 3.获取文本 ， 通过xpath下的text（）函数： address = tr.xpath("./td[4]/text()")[0] 4.在某个标签下使用xpath函数 , 获取其子孙函数, 应
用html+css写一个两层图片重叠翻转
最新发布
07-11
下面是一个使用 HTML 和 CSS 实现两层图片重叠翻转的示例代码： ```html <!DOCTYPE html> .container { position: relative; perspective: 1000px; width: 300px; height: 300px; } .card { position...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值