position的属性值的效果，直接受其容器样式中position属性值影响
relative（相对）以及absolute（绝对）。
往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性 position设置为relative就可以了。
也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候，就能很方便的添加一些UI元素，例如某一个活动层的关闭按钮等。
<img> 都有width属性，如img.width 值没有px 但style.width 是有px的，必须用parseInt去除，不然会报错，当<img>定义了固定宽度时，可用var image = new Image();
image.src = img.src;得到原图像的原大小
------------------------
<body>
<div id="Canvas" style="background-color:#cccccc;height:266px;width:284px">
<table id="Crop" cellpadding="0" cellspacing="0" border="0" style="border: 1px solid green">
<tr>
<td style="height: 107px" colspan="3" class="Overlay"></td>
</tr>
<tr>
<td style="width: 105px" class="Overlay"></td>
<td style="width: 90px; height: 60px; border-width: 1px; border-style: solid; border-color: white;"></td>
<td style="width: 105px" class="Overlay"></td>
</tr>
<tr>
<td style="height: 107px" colspan="3" class="Overlay"></td>
</tr>
</table>
<div style="position: relative; left:0; top: 0; border: 1px solid red" id="IconContainer">
<img id="icon" src="1.gif" style="border-width: 0px; position: relative; left: 0px; top: 0px">
</div><div style="position: relative; left:16; top:16">fdsadsa</div>
</div>
</body>
<script type="text/javascript">
<!--
var canva = document.getElementById("Canvas");
var obj = document.getElementById("icon");
var image = new Image();
image.src = obj.src;
alert(canva.style.width)
alert(image.width)
alert(obj.width);
alert(obj.style.width);
obj.style.left = (parseInt(canva.style.width) - image.width )/2 + "px";
obj.style.top = -(parseInt(canva.style.height) + image.height)/2 + "px";
//-->
</script>
图片居中，这类问题一般都是算两者的width和height，再求left和top，都要求（最好放一起），position设为relative ,相对自己在父元素的原始位置的位移，向右下角移动为正
分享到：
相关推荐
在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...
在CSS中，`background-position`属性是一个非常重要的部分，它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像，从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...
" Float与Position属性" Float 与 Position 属性是 CSS 中两个重要的概念，它们可以帮助开发者建立复杂的布局，实现多年的梦想。通过这两个属性，可以将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用...
在MATLAB开发中，"SunPosition"项目涉及的是利用编程计算太阳的地心赤道位置，这一概念在天文学和地球科学中非常重要。太阳的地心赤道位置是指从地球的中心观察，太阳在天球赤道上的坐标，通常以国际天球参照系统...
在网页设计和开发中，`position`属性是CSS（层叠样式表）中的一个关键概念，用于控制元素在页面上的定位方式。`position`属性允许开发者精确地布局元素，实现复杂的网页布局效果。本学习文件将深入探讨`position`...
### 解决IE6中的定位问题：Position Fixed 在早期的Web开发中，Internet Explorer 6（简称IE6）因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...
在CSS世界中，`background-position`是一个至关重要的属性，它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用，用于创建各种视觉效果，如图像滑动、定位图标等。本篇文章将深入探讨`...
### div的position属性详解 #### 一、流动模型（块元素与内联元素） 流动模型是CSS布局的基础，指的是在没有特别指定定位方式的情况下，元素按照文档流的自然顺序排列。 - **块元素**：默认情况下，每个块元素...
关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式，用于控制元素在文档中的位置。Position 属性有五个值：static、relative、absolute、fixed 和 inherit。其中，static 是...
Virus Fixed Position 1.5 是一款针对计算机病毒定位与修复的软件，旨在帮助用户检测并消除系统中的恶意软件和病毒。这款最新原版程序确保了用户能够获取到最新的反病毒技术和安全更新，以保护他们的计算机免受不断...
"获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里，我们将深入探讨相关知识，并参考提供的博客链接以及相关的HTML文件。 首先，元素的绝对位置是指元素左上角相...
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
在After Effects（AE）这款强大的视觉特效和动态图形软件中，"Position"（位置）属性是每个图层不可或缺的一部分，它决定了图层在合成中的显示位置。本篇将深入探讨AE层中的Position位置操作，帮助你更好地理解和...
tx=figure('Name','exp2','menu','none','units','normalized','position',[0.3,0.3,0.5,0.5],'color','b'); frame=uicontrol(tx,'style','text','units','normalized','position',[0.02,0.02,0.96,0.7],'fontsize',...
CSS中的position属性用于指定元素在文档流中的定位方式，它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值：static、fixed、relative、absolute，下面逐一详细说明。 1. static定位：这是...
在本篇关于“three.js 入门三：buffergeometry贴图属性（position、index和uvs）”的文章中，我们将深入探讨如何使用three.js库在3D场景中应用纹理贴图，特别是关注BufferGeometry对象中的关键属性。BufferGeometry...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的定位方式。本文将详尽地探讨`position`属性中的`relative`和`absolute`值，以及它们在网页设计中的应用。 首先，`position`属性的默认值...
在CSS布局中，`position:relative`和`overflow:hidden`是两个非常重要的属性，它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先，我们来看`...
然而，在Internet Explorer 6 (IE6)这个古老的浏览器中，`position: fixed;`并不完全按照预期工作，存在一些兼容性问题。这个问题困扰了开发者很多年，因为它限制了网页在IE6上的设计灵活性。 为了解决IE6中的`...
标题 "speed_position_dcmotor_" 暗示我们讨论的主题是关于直流电动机（DC Motor）的速度和位置控制模型。在这个模型中，我们将探讨直流电机的工作原理、速度控制和位置定位的基本概念，以及如何通过模拟（如使用...