html绝对和相对于彼此的偏移

我有和问题使用一个外部链接的CSS控制的样式的HTML文档。我在本地渲染并尝试了Chrome和Firefox。html绝对和相对于彼此的偏移

这个问题是这样的：

我都随高度和（我把颜色的方块到网页）的200像素宽度值的两个<div>元素。但是他们的位置属性值不同。一个人的“绝对”是另一个人的“亲属”。我基本上试图把两个盒子放在一起。例如（在css文件中）

#item1{position: absolute; left:300px; top: 300px; z-index: 1;} 

#item2{position: relative; left:300px; top: 300px; z-index: 2;}

item2将从项目1偏移8个像素，向下和向右。

我试着将item2上的所有边距（和填充）设置为零，但没有奏效。

谢谢！

来源

2017-02-11 painter

“绝对”和“相对”做了不同的事情，目前还不清楚为什么你在这里使用一个，而不是你想要达到的目标。此外，你应该包括你的HTML - 最好作为一个片段（见工具栏上的按钮） – CupawnTae

（但你可能想尝试在你的'body'上设置边距和填充为零） – CupawnTae

@Uday这是不正确的 - 对于'相对“元素，”顶“和”左“是相对于元素自身的正常位置，这与”绝对“的工作方式不同，但它们确实有效。 – CupawnTae

-1

获取到LearnLayout.com/position.html马上理解和解决这个问题。然后通读整个网站（不会花费很长时间，你会感谢我） - 这是我见过的最令人沮丧的关于CSS的最佳网站。从长远来看，它会为您节省数小时和数天的时间。

来源

2017-02-11 14:07:43 jotasprout

是的，我感谢你。我需要的解决方案（以及更多）在网站上。我通过创建body {margin; 0;}。它排列起来。谢谢！ – painter

你很受欢迎@painter。相当困惑的是答案被标记为正确的，但得分为负。 – jotasprout

您需要为两个div使用position: absolute;。

尝试改变ITEM2到：

#item2{position: absolute; left:308px; top: 308px; z-index: 2;}

来源

2017-02-11 13:55:06 Sean

感谢您的回复，您的解决方案确实能够按照我想要的方式调整元素。但是我不满意，因为原来的行为（即保持左：300px）没有按预期执行。这对我来说是一个学习练习。谢谢！ – painter

不客气！你能接受它作为答案吗？ :) – Sean

其实，以前的答案指向我LearnLayout.com/position原来是我正在寻找的（解决更大的问题为什么两个位置为300的位置相互偏移的元素）。我很抱歉，因为这是我第一次（如果不是第一个）我在这里发布在stackoverflow上的问题之一，并没有接受前面的答案，因为我不完全确定它是如何工作的。非常感谢您的时间和您的评论。 – painter

如果您想要将一个div放在另一个div的上面，则两个div都必须放在绝对位置。

来源

2017-02-11 14:11:42 catapultedplastic

不幸的是，我正在处理的问题的参数需要一个div是绝对的，另一个是相对的。谢谢！ – painter

html绝对和相对于彼此的偏移

回答

相关问题