css - 親コンテナーを移動しない CSS マージン ネガティブ

Question

このページ ( http://musicaladvocacy.org/ ) で「ホーム」(灰色のグラデーションの白いコンテナ) と表示されている領域を 60 ピクセル上に移動しようとしていますが、ご覧のとおり、それは実行されます親コンテナを上に移動します。全体ではなく、白いボックスを上に移動させたいだけです。したがって、次のようになります: http://musicaladvocacy.org/index-margin.jpg

アイデアをありがとう！

Answer 1

親の上部に1pxのパディングを追加し、負のマージンを引き続き使用することもできます。

.width { padding-top: 1px; }
.content { margin-top: -60px; }

これが機能するのは、互いにすぐに対抗するマージンが1つのマージンに結合されるためです。

Answer 2

position:relative; top:-60px;シフトアップが必要な要素に適用できます。

#el {
   position:relative;
   top:-60px;
   z-index: 5;
}

Answer 3

あなたが探しているのは、css プロパティの "position" と "top" です。

#div-1 {
  position:relative;
  top:-60px;
}

このガイドの手順 2 を参照してください。他の多くの Web サイトにも、このプロパティに関する詳細情報があります。