0

ここでの私の最初の質問です。私はhtml/cssを初めて使用するので、これがあまりにもわかりにくい質問に聞こえる場合は、我慢してください。私はコードを持っていないので、問題自体は単純なので、代わりに言葉で説明しますが、今のところ解決策を見つけることができません。

position：relative;を使用して要素を配置する場合。通常の場所から指定された座標に移動しますよね？

ここで、通常のフローに多くの要素があり、それらが一緒に高さ2000pxを占める場合、それらすべての要素をdiv [1000px x 1000px]に配置したいので、相対位置を使用してそれらを位置に移動します。すべて問題ありません。そしてダンディ、ページがまだ2000pxであることを除いて、私が要素を移動したとしても、これを解決する方法は、これを達成するための1つ以上の方法があります。

編集：多分それは私が意味したことを混乱させています、これはあなたたちがよりはっきりと見ることができるようにコードの例です。今、私はそれらを欲しい場所にそれらの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 に答える