如何利用css进行精准定位,求详细思路。

html-css019

如何利用css进行精准定位,求详细思路。,第1张

relative定位(相对定位) position:relative

相对本元素的左上角进行定位,top,left,bottom,right都可以有值。虽然经过定位后,位置可能会移动,但是本元素并没有脱离文档流,还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素,或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。

相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位,本元素需要设置position为relative。

absolute定位(绝对定位) position:absolute

相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位,如果在祖代元素中没有有relative定位的,就默认相对于body进行定位。

按照DIV的顺序来解释

第一个:精确定位,距离border上面300像素,左边450像素。div的高度和宽度是14 和 322.border(边框)宽1px,颜色是#707888,实心的线画出来的边框。如果内容超过了div的面积,那么隐藏它大出来的部分。

第二个:精确定位,而且它在第一个div的scope内。他有一个id名字是pimg.它的位置是超过它本身的border上面1px,左边150px。

第三个:精确定位,字体大小9pt 同样也有个id ,内容是aloading.这个div有个内容是loading.....