div绝对定位与相对定位以及float属性？

Posted 2023-04-30

　　定位很多种，不只绝对和相对。
　　div绝对定位是指相对于整个页面的位置，相对定位是指相对于父div的位置，float属性是div浮动可以让div 向左或者向右，还可以居中。
　　绝对定位 相对定位，对象不可层叠，可以通过left，right，bottom，top等属性在正常文档流中偏移位置，可以通过z-index进行层次分级。
a　　bsolute 脱离文档流，通过left，right，bottom，top等属性在正常文档流中偏移位置，选取其最近的父极定位元素，当父级元素position为static时，该元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 参考技术A 关于div相对定位和div绝对定位的说明

<style>
body
margin: 30px; font-size:9pt;

.a, .b, .c, .d, .e

width: 100px;
height: 100px;
margin: 5 auto;
color: #fff;
background: #000;

.aa, .bb, .cc, .dd, .ee

top: 10px;
left: 10px;
width: 10px;
height: 10px;
overflow: hidden;
background: #F90;

.b, .d, .e
position: relative;
.cc, .dd, .ee
position: absolute;
</style>

<div class="a">
<div class="aa"></div>
A:均不设置postion，一般嵌套关系
</div>

<div class="b">
<div class="bb"></div>
B:仅外div设置relative，一般嵌套关系
</div>

<div class="c">
<div class="cc"></div>
C:仅内div设置absolute，文档中为嵌套关系，页面中内div浮起[非float]，相对于页面定位，与外div无关。
</div>

<div class="d" style="background:#ff0000">
<div class="dd" ></div>
D:外div设置relative，内div设置absolute，内div浮起来并相对于外div定位
</div>

<div class="d" style="background:#ff0000">
<div class="dd" style="position:relative"></div>
D:外div设置relative，内div设置relative，内div浮起来并相对于外div定位
</div>

<div class="e">
<div class="ee" style="left: -10px;"></div>
E:这个是说明边界问题。-10 != 反向10px间距
</div> 参考技术B div 如果在其他的div 或者 table 里,所写的高和宽百分比是相对的。
如果是独立的就是绝对的
float是浮动的 参考技术C 加油啊 参考技术D 没有什么

position属性中的绝对定位和相对定位

absolute(绝对定位):
1.如果没有父级DIV，则会根据浏览器原始点去定位，而且跟他相邻的DIV会忽略它，定位后则可用TRBL(top,right,bottom,left)去布局。注意：TRBL必须在设定了position后方可用。
2.如果有父级DIV，那还要看父级DIV是否有position和padding设置,如果有，则此DIV会根据父DIV去定位，且有“撑开或占据高度”的作用，如果没有，则跟上面没有区别。
relative(相对定位):
1.如果没有父级DIV，它和absolute没有区别。顶级DIV最好设成relative定位。
2.如果有父级DIV，但父级没设置position，那还是根据body内容区去定位的。如果顶级DIV用relative定位则放小窗口也不会影响页面的,但absolute就会全部重叠。
3.如果父级设置了position或者padding属性后，则此DIV会根据父DIV去定位。而且有“撑开或占据高度”的作用。