如何定位两个div

Is there any way to start drawing divs from the same point? That means if I add new div and then I add another div, they will appear above each other. Because I want to move them all together depending on the same point.

有没有办法从同一个点开始画div ?这意味着如果我添加新的div，然后添加另一个div，它们会出现在彼此的上方。因为我想把它们都移动到同一个点上。

CSS:

#num1,#num2{
    display : inline
    position:relative;
    left:50px;
}

HTML:

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

So what should I add to this code so when the browser render this code the 2 divs will be on the same place?

那么我应该向这些代码中添加什么呢当浏览器呈现这些代码时两个div会在同一个位置?

5 个解决方案

#1

All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.

所有关于绝对定位的陈述都是正确的。但是，人们没有提到您需要的位置:父容器上的相对位置。

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

Supporting CSS:

支持CSS:

#container { position: relative; }
#num1, #num2 { position: absolute; left: 50px; }

Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:

根据您希望在顶部的哪个元素，您可以将z索引应用于您的绝对定位div。较高的z指数使元素更重要，把它放在其他元素的顶部:

/* num2 will be on top of num1 */
#num1 { z-index: 1; }
#num2 { z-index: 2; }

#2

Use z-index to position divs on top of one another:

使用z-index将divs排列在一起:

[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]

So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:

因此，您将使用绝对/相对位置来定位divs，然后使用z-index对它们进行分层:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

#3

Make the first one position:absolute, which should take it out of the normal flow of the page.

做第一个位置:绝对的，应该把它从正常的页面流中去掉。

some help.

一些帮助。

#4

I believe the only way to do this is to use absolute positioning

我认为唯一的方法就是使用绝对定位

#5

-1

You can use absolute positioning.

你可以使用绝对定位。

  #num1,#num2{ display : inline position:absolute; left:50px;top:10px; }

#1