Question

我在将div元素垂直堆叠在一起时遇到问题。我有一个mainwrapper和2个div元素，我需要堆叠。但每当我给出第一个内部div position: absolute然后right: 0或甚至float: right时，它就进入第二个div。有没有办法解决这个问题？

<div class="wrapper">

    <div class="test1"></div>

    <div class="test2">
        <div class="test3"></div>
    </div>

</div>

CSS：

.wrapper {
    width: 605px;
    margin: 0 auto;
    position: relative;
    background: transparent;
    border: 1px solid black;
    height: 240px;
}

.test1 {
    border: 1px solid black;
    width: 200px;
    height: 30px;
    display: block;
    position: absolute;
    right: 0;
}

.test2 {
    border: 1px solid red;
    width: 600px;
    height: 200px;
    display: block;
    position: absolute;
}

.test3 {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 0;
}

这是我的jsfiddle。

Answer 1

我不完全确定你为什么要像那样定位那些人。我将假设您使用position：absolute以便这些div不会干涉其他内容。此外，没有必要为div设置'display：block'，这是它们的默认值。

这是一个随心所欲的小提琴，并且包装器设置为position：absolute，以便这些div不会干扰其他内容。基本上，您将使用包装器作为框架。 Solution

.wrapper {
    width: 605px;
    left: 50%;
    margin-left: -302.5px;
    position: absolute; 
    background: transparent;
    border: 2px solid black;
    height: 240px;
}

.test1 {
    border: 2px solid green;
    width: 200px;
    height: 30px;
    position: relative;
    right: 0;
}

.test2 {
    border: 2px solid red;
    width: 600px;
    height: 200px;
    position: relative;
}

.test3 {
    border: 2px solid black;
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 0;
}

注意：

position：relative可以做与position相同的东西：absolute，AND 事物仍然流动，好像元素仍处于默认状态位置（但不一定是这样）。
位置：绝对需要元素流出
位置：固定与绝对相同但是参考窗口本身（想想固定导航栏）

Answer 2

http://jsfiddle.net/uFf9D/会有效吗？

我在.wrapper上注释了维度并添加了overflow：hidden。然后将.test1和.test2更改为position：relative和float：right。

修改：读取宽度，因为它需要居中。

.wrapper {
  width: 605px;
/*
  height: 240px;
*/
  overflow: hidden;
  ...
}

.test1 {
/*
  position: relative;
*/
  float: right;
  ...
}

.test2 {
  position: relative;
  float: right;
  ...
}

如果你想跳过浮动和溢出：隐藏，方向：rtl可能是.wrapper的可能解决方案..不知道它是否有效或是否继承。

尝试添加.test2以添加.test1：

width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;

如何使用position：relative将DIV元素堆叠在彼此的顶部

2 个答案: