私はCSSを初めて使用し、2つの透明なボックスを正しい位置に重ねて配置しようとしています(垂直方向に整列)。多くの解決策を試しましたが、今は行き詰まっています...
2 に答える
問題を定義する方法は、必要に応じて他の方法よりも適した方法がいくつもあるため、何をしようとしているのかについて多くの議論が残されています。また、特に定義されるまで、ほとんどすべてが透過的です。
たとえば、ボックス内にボックスを含めることができます
<div><div></div></div>
これにより、ボックスが同じ場所に表示されます。ある程度の寸法を与えるために、高さと幅を定義する必要があることを認めてください。しかし、その外では他の上に。
別の例もあります
<style>.layer{position:fixed;top:0;left:0;width:40px;height:40px;}</style>
<div class="layer" style="z-index:1;"></div>
<div class="layer" style="z-index:2;"></div>
これは、コードの記述に関しては文字通り2つの要素を並べて作成しますが、インラインスタイルのz-indexは一方を他方の上に作成します。しかし、やはりまだまだ方法があります。私が思いもよらない方法もあると思います。しかし、すべてにおいて、長期的には何があなたにより適しているかについてのあなたの最終的なニーズに依存します。
編集 私があなたのコメントを通してあなたを理解しているなら、あなたは基本的に私の2番目のコンセプトを最初に投稿したいと思うでしょう、もちろん少し変更されたので、左ではなく右にあります。このような場合は、jsfiddle.netでこのデモをチェックして、これがあなたの探しているものであるかどうかを確認してください。http://jsfiddle.net/hEEGd/
それらを3番目のコンテナボックスに入れて、その寸法を次のように設定してみてください。
height:両方の内側のボックスの高さの合計(いずれかに境界線がある場合は+ 1〜2 px)、
width:内側のボックスの2つの幅のうち長い方(+ 1〜2ピクセル)。
次に、両方の内側のボックスに「float:right」を設定します。