0

我在这里的第一个问题，我是 html/css 的新手，所以如果这听起来太无聊，请耐心等待。我没有任何代码，所以无法用文字来解释，因为问题本身很简单，但我现在无法找到解决方案。

当您使用 position:relative; 定位元素时 它从它通常所在的位置移动到指定的坐标，对吗？

现在，如果您在正常流程中有许多元素并且它们占用了 2000px 的高度，并且我想将所有这些元素定位在 div [1000px x 1000px] 中，所以我使用相对位置将它们移动到位置，一切都很好和花花公子，除了页面仍然是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>
4

2 回答 2

0

改用负边距：

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

在这种情况下，需要相对定位将元素放置在由于通过负边距移动而重叠的元素之上。z-index如果重叠的元素本身相对或绝对定位，也可能需要使用。

于 2013-03-07T17:28:01.787 回答
-1

如果你想约束我们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/

于 2013-03-07T17:36:35.113 回答