position：absolute和relative区别
<h4>Position定位：relative | absolute </h4>
定位⼀直是
WEB标准应⽤中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会⾛样。如果理清了定位的原理，那定位会让⽹页实现的更加完美。
<h5> 定位的定义：</h5>在CSS中关于定位的内容是：
position:relative | absolute | static | fixed
<h6>static(静态)</h6>没有特别的设定，遵循基本的定位规定，不能通过z-index进⾏层次分级。
<h6>relative(相对定位)</h6>对象不可层叠、不脱离⽂档流，参考⾃⾝静态位置通过top,bottom,left,right定位，并且可以通过z-index进⾏层次分级。
<h6>absolute(绝对定位)</h6>脱离⽂档流，通过top,bottom,left,right定位。选取其最近⼀个最有定位设置的⽗级对象进⾏绝对定位，如果对象的⽗级没有设置定位属性，
dubbo原理解析absolute元素将以body坐标原点进⾏定位，可以通过z-index进⾏层次分级。
<h6>fixed（固定定位）</h6>这⾥所固定的参照对像是可视窗⼝⽽并⾮是body或是⽗级元素。可通过z-index进⾏层次分级
注：CSS中定位的层叠分级：
z-index: auto | number;
auto 遵从其⽗对象的定位
number⽆单位的整数值。可为负数
1、相对定位relative
相对定位是⼀个⾮常容易掌握的概念。如果对⼀个元素进⾏相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或⽔平位置，让这个元素“相对于”它的起点进⾏移动。如果将top设置为20像素，那么框将出现在原位置顶部下⾯20像素的地⽅。如果将left设置为20像素，那么会在元素左边创建20像素的空间，也就是将元素向右移动（见图2-10）。
33.png
<pre>
10随机函数公式*#mybox {
position relative;
left: 20px;
top: 20px;
}</pre>
图2-10 对元素进⾏相对定位
在使⽤相对定位时，⽆论是否进⾏移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。
当Position****属性值为****Relative时对象原来占有的位置保留，其后⾯的对象按原来⽂档流仍然保持原来的位置 Top的值表⽰对象相对原位置向下偏移的距离 bottom的值表⽰对象相对原位置向上偏移的距离 两者同时存在时，只有Top起作⽤。 left的值表⽰对象相对原位置向右偏移的距离 right的值表⽰对象相对原位置向左偏移的距离 两者同时存在时，只有left起作⽤。
如果相对定位的对象有**padding **和****border ****和**** margin****时，定位的起点不受影响。还是原来物体的位置。
mysql存储数据过程
** 2.绝对定 absolute**
相对定位实际上被看作普通流定位模型的⼀部分，因为元素的位置相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与⽂档流⽆关，因此不占据空间。普通⽂档流中其他元素的布局就像绝对定位的元素不存在时⼀样（见图2-11）。
44.png
图2-11 对元素进⾏绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据⽤户代理的不同，最初的包含块可能是画布或HTML元素。
与相对定位的框⼀样，绝对定位的框可以从它的包含块向上、下、左、右移动。这提供了很⼤的灵活性。可以直接将元素定位在页⾯上的任何位置。
对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在⽂档流中的初始位置，⽽绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。
因为绝对定位的框与⽂档流⽆关，所以它们可以覆盖页⾯上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。z-index值越⾼，框在堆中的位置就越⾼。
当Position****属性值为****absolute时对象从⽂档流中抽取出来，原占有的位置被后⾯的对象顶替上来 Top的值表⽰对象上边框与浏览器窗⼝顶部的距离 bottom的值表⽰对象下边框与浏览器窗⼝底部的距离 两者同时存在时，只有Top起作⽤；如果两者都未指定，则其顶端将与原⽂档流位置⼀致，即垂直保持位置不变。 left的值表⽰对象左边框与浏览器窗⼝左边的距离 right的值表⽰对象右边框与浏览器窗⼝右边的距离 两者同时存在时，只有left起作⽤；如果两者都未指定，则其左边将与原⽂档流位置⼀致，即⽔平保持位置不变。  　在Position属性值为absolute的同时，如果有⼀级⽗对象（⽆论是⽗对象还是祖⽗对象，或者再⾼的辈分，⼀样）的Position属性值为Relative时，则上述的相对浏览器窗⼝定位将会变成相对⽗对象定位，这对精确定位是很有帮助的。
被关联的绝对定位上⾯说的是单⼀的绝对定位，⽽在实际的应⽤中我们常常会需要⽤到⼀种特别的形式。即希望定位元素要有绝对定位的特性，但是⼜希望绝对定位的坐标原点可以固定在⽹页中的某⼀个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对
定位要跟着⽹页移动，⽽并且是因定在⽹页的某⼀个固定位置。通常当⽹页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本⽅式就是为这个绝对定位的⽗级设置为相对定位或是绝对定位（绝对定位时****Left****，****Top****等属性不设值，就能固定在没有设置****Position****时应该在的位置上）。那么绝对定位的坐标就会以⽗级为坐标起始点。
虽然是如此，但是这个坐标原点却并不是⽗级的坐标原点，这是⼀个很奇怪的坐标位置。我们看⼀下模型图⽰：
55.png
我们看到，这个图中⽗级为⿊灰⾊区块，⼦级为青⾊区块。⽗级是相对定位，⼦级是绝对定位。⼦级设置了顶部位移50个像素，左倾位移50个像素。那么我们看，⼦级的坐标原点并不是从⽗级的坐标原点位移50个像素，⽽是从⽗级块的border左上边缘点为坐标起始点（即A 点）。⽽⽗级这⾥如果要产⽣位置移动，或是浏览器窗⼝⼤⼩有所变动都不会影响到这个绝对定位元素与⽗级的相对定位元素之间的位置关系。这个⼦级也不⽤调整数值。
这是⼀种很特别并且也是⾮常实⽤的应⽤⽅式。如果你之前对于定位的控制并不⾃如的话，相信看完对这⾥对定位的解释⼀定可以把定位使⽤得随⼼所欲。
position和location的区别
相对定位的参照物：
4.png
效果图：
vlookup怎么绝对引用
html 教程页面设计66.png
以最近的祖先定位元素为参照物的情况图6中，Box2设置成绝对定位元素，脱离了⽂档流，⽂档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝⾊框）为参照物。层级关系为：
7.png 效果图：
8.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。