相对于其容器放置元素
我正在尝试使用HTML和CSS创建水平100％堆叠的条形图。我想DIVs根据背景颜色和百分比宽度创建条形，具体取决于要绘制的值。我还希望有一条网格线来标记沿图的任意位置。
在实验中，我已经通过指定CSS属性来将条形图水平堆叠float: left。但是，我想避免这种情况，因为它确实以混乱的方式使布局混乱。此外，当条形图浮动时，网格线似乎不太好用。
我认为CSS定位应该可以处理此问题，但我还不知道该怎么做。我希望能够指定几个元素相对于其容器的左上角的位置。我经常遇到这种问题（即使在这个特定的图形项目之外），所以我想要一种方法：
- 跨浏览器（理想情况下没有太多的浏览器黑客攻击）
- 在怪癖模式下运行
- 尽可能清晰/整洁，以方便自定义
- 如果可能的话，不使用JavaScript。
问题答案：
您认为CSS定位是正确的做法。这是一个快速的总结：
position: relative将相对于 自身 布置一个元素 。
换句话说，将元素以常规流程布置，然后将其从常规流程中移除并通过您指定的任何值（顶部，右侧，底部，左侧）偏移。重要的是要注意，因为它已从流中删除，所以周围的其他元素也不会随之移动（如果您希望这种行为，请使用负边距代替）。
但是，您最可能对position: absolute哪个元素相对于容器定位感兴趣。默认情况下，容器是浏览器窗口，但是如果父元素具有position: relative或position: absolute设置在其上，则它将用作为其子元素定位坐标的父元素。
展示：
#container {
position: relative;
border: 1px solid red;
height: 100px;
}
#box {
position: absolute;
top: 50px;
left: 20px;
}
<div id="container">
<div id="box">absolute</div>
</div>
在该示例中，的左上角#box将为，其左上角向下为100像素，而的左上角为50像素#container。如果#container未position: relative设置，则其坐标#box将相对于浏览器视口的左上角。
-
问题内容： 我正在尝试使用以下方法修复一个问题，使其始终停留在屏幕顶部： 但是，该容器位于居中的容器中。当我使用它时，它固定了相对于浏览器窗口的相对位置，例如它靠在浏览器的右侧。相反，它应该相对于容器固定。 我知道可以用来相对于修复元素，但是当您向下滚动页面时，该元素消失并且不会像那样粘在顶部。 是否有破解或解决方法来实现这一目标？ 问题答案： 简短的回答： 不。 （现在可以使用CSS转换。请参见
-
有什么想法吗？提前谢了。
-
问题内容： 我需要在滚动窗格上相对于鼠标位置放大/缩小。 我目前通过将内容包装在一个组中并缩放组本身来实现缩放功能。我用自定义枢轴创建一个新的Scale对象。（枢轴设置为鼠标位置） 这在Group的初始比例为1.0的情况下非常适用，但是之后的缩放比例无法沿正确的方向缩放-我相信这是因为Group缩放后相对鼠标位置会发生变化。 我的代码： 如何在不同的缩放级别上获得正确的鼠标位置？有没有一种更简单的
-
我正在设计的网页布局像这样：http://jsfiddle.net/5sTub/ 编辑：注意：我并不是想要一个黏糊糊的页脚。我只想把它放在页面底部。回答之前请先看小提琴 我试图定位在页面底部的页脚，但无法像你在上面的链接中看到的那样。我尝试了在互联网上找到的一切，包括设置容器元素的位置：相对；页脚的
-
问题内容： 我想使用画布制作一个绘画应用程序。所以我需要找到鼠标在画布上的位置。 问题答案： 对于使用JQuery的人： 有时，当您拥有嵌套元素时，其中一个元素会附加事件，这可能会使您难以理解浏览器将其视为父级。在这里，您可以指定哪个父级。 您采用鼠标位置，然后从父元素的偏移位置中减去它。 如果要在滚动窗格内的页面上获取鼠标位置： 或相对于页面的位置： 请注意以下性能优化： 这样，JQuery不必
-
问题内容： 确定元素相对于文档/正文/浏览器窗口的位置的最简单方法是什么？ 现在，我正在使用，但是此方法只给您相对于父元素的位置，因此您需要确定body元素有多少个父元素，以了解相对于body /浏览器窗口/文档位置的位置。 这种方法也很麻烦。 问题答案： 您可以遍历DOM的顶层。