揭开CSS的绝对定位真实的面纱（二）

2019独角兽企业重金招聘Python工程师标准>>>

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。

需要注意一下几点：

1.要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

1 <div class="box1"> → 相对定位

2 <div class="box2"> → 没有定位

3 <p></p> → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素

4 </div>

5 </div>

1 <div class="box1"> → 相对定位

2 <div class="box2"> → 相对定位

3 <p></p> → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素

4 </div>

1 </div>

2.不一定是相对定位，任何定位，都可以作为参考点

1 <div> → 绝对定位

2 <p></p> → 绝对定位，将以div作为参考点。因为父亲定位了。

3 </div>

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱离标准刘，儿子脱离标准流在父亲的范围里面移动。

1 <div class=”box1”> → 绝对定位

2 <div class=”box2”> → 相对定位

3 <div class=”box3”> → 没有定位

4 <p></p> → 绝对定位，以box2为参考定位。

5 </div>

6 </div>

7 </div>

3. 绝对定位的儿子，无视参考的那个盒子的padding。

下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。

p将无视父亲的padding，在border内侧为参考点，进行定位：

转载于:https://my.oschina.net/u/2971691/blog/864257

揭开CSS的绝对定位真实的面纱（二）相关推荐

CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
连通子图什么意思_一道物理竞赛题揭开“希罗喷泉”的神秘面纱，到底什么物理原理？...
多数初二的中学生朋友们现在都已经在学习压强知识,这一块知识属于中考物理必考重点内容,所占分值很高,所考查题型非常广泛,而且多是力学知识的综合性应用,因此属于中考的一个难点,中学生朋友们在遇到有关此类复 ...
xpress-mp优化实例精选_实例解析，揭开“隔震技术”的神秘面纱！
作者简介:仁者见仁,从事施工管理,深扎施工一线多年.著有微信公众号"仁者见仁",旨在为大家提供关于施工技术.项目管理最接地气的满满干货. 传统的抗震技术主要特点是"抗&q ...
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
css关于绝对定位的居中
一,css关于绝对定位的居中 .main { width: 600rpx; height: 280rpx; background: #fff; margin: auto; position: abso ...
html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
揭开Javascript闭包的真实面目
揭开Javascript闭包的真实面目闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分,本文将用通俗的语言带您深入理解Javascript闭包 ...
css中绝对定位中的left和top属性
<html><head><title>Absolute Position</title><style type = "text/css& ...
揭开J2EE集群的神秘面纱（一）：什么是J2EE集群
揭开J2EE集群的神秘面纱(一):什么是J2EE集群作者:不详来源:CSDN博客酷勤网收集 2008-04-18 摘要酷勤网 J2EE集群技术包括负载均衡和失效转移.负载均衡意味着有许多客户端 ...
html图片中绝对定位,CSS中绝对定位
CSS中绝对定位 html> Position(定位) *{margin: 0px;padding: 0px;} body{background: url(images/2.jpg) no-re ...

揭开CSS的绝对定位真实的面纱（二）

揭开CSS的绝对定位真实的面纱（二）相关推荐

最新文章

热门文章