Question

我在这里的第一个问题，我是html / css的新手，所以如果这听起来太愚蠢了，请跟我说。我没有任何代码，所以用语言解释，因为问题本身很简单，但我现在无法找到解决方案。

使用position：relative定位元素时;它从通常会到达的位置移动到指定的坐标，是否正确？

现在，如果你在正常流程中有很多元素，并且它们一起占用高度为2000px，我想将所有这些元素放在div [1000px x 1000px]中，所以我使用position relative将它们移动到位置，一切都很好，花花公子，除了页面仍然是2000px，即使我已经移动了元素，如何解决这个问题，是否有一种或多种方法可以实现这一点。

编辑：也许这让我感到困惑，这是代码中的一个例子，所以你们可以更清楚地看到。现在我得到了我想要的那些div，但在它们之下，我想你可以说他们的初始位置仍然存在并创建一个卷轴。

<html>  
<head>
<style>
#one{
border: 1px green solid; 
height: 500px; 
width: 20px; 
}
#two{
 border: 1px black solid; 
height: 500px; 
width: 20px;
position: relative; top: -502px;  left: 100px; 
}
#three{
border: 1px red solid; 
height: 500px; 
width: 20px;
position: relative; top: -1004px;  left: 200px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>   
</body>
</html>

Answer 1

改为使用负边距：

.example {
    margin-top: -1000px;
    position: relative;
}

在这种情况下需要相对定位将元素放置在元素上方，该元素在通过负边距移位的结果中重叠。如果重叠元素本身相对或绝对定位，则可能还需要使用z-index。

Answer 2

如果要约束div中的所有元素，可以使用overflow：hidden

HTML

<div id="elementsinadiv">
    <div class="myelement">Some stuff</div>
    <div class="myelement">Some stuff</div>
    <div class="myelement">Some stuff</div>
    <div class="myelement">Some stuff</div>
</div>

CSS

#elementsinadiv{
    height: 100px;
    width: 200px;
    background-color: blue;
    overflow: hidden;
}

.myelement{
    position: relative;
    display: block;
    height: 50px;
    width: 100px;
    border: 1px solid red;
    background-color: #f3f3f3;
}

http://jsfiddle.net/zVmSv/5/

相对位置，如何摆脱死角？

2 个答案: