CSSマージンの問題

Question

ウェブサイトのコンテンツが表示されているかどうかにかかわらず、コンテンツdivがあると考えてください。ヘッダーから余裕をもたなければならないため、このdivの余白は20pxです。右側のサイドバーもあります。つまり、コンテンツ全体と2つの浮動小数点divsが互いに隣り合っているということです。 1つはコンテンツ用、もう1つはサイドバー用です。かなり標準。

今、突然コンテンツにブレッドクラムを追加する必要があります。今、ブレッドクラムはヘッダーから余裕を持ってはいけません。ただし、コンテンツには、ブレッドクラムが有効かどうかに関係なく、20ピクセルの上マージンが必要です。

確かに、breadcrumbsは別のdivにあるようにして、コンテンツの一番上に置いてください。これは、コンテンツのdivが2つのdivに分割される必要があります。たとえば、 'breadcrumb'と 'main_content'です。

パンくずは実際にコンテンツの一部であると私は思うので、これは私にとっては悪い考えです。さらに、私はこの新しいdivと一般的なマークアップの変更でそれらを提示するために私のすべてのテンプレートを変更する必要があります。

breadcrumb divにトップマージン：-20pxを追加しようとしましたが、それは他のコンテンツにも適用されるため良くありません。

良い方法でそれを行う方法に関するアイデアはありますか？

P.S.サイドバーのdivには20pxのマージンはありません。メインコンテンツにはマージンがあり、内部コンテンツにはマージンがあります。

Answer 1

position: relative; top: -20px;はあなたのために機能しますか？

Answer 2

main_contentdivに対してposition:relativeを指定します。あなたはposition:absolute、top：some-pxを適用する必要があります。下：あなたの要件に応じていくつかのpx。