web-dev-qa-db-ja.com

絶対位置とマージンを設定します

要素のpositionをabsoluteに設定し、margin-bottomが、margin-bottomは効果がありません。

HTML：

<div id='container'></div>

CSS：

#container {
  border: 1px solid red;
  position: absolute; 
  top: 0px;
  right: 0px;
  width: 300px;
  margin-bottom: 50px; // this line isn't working
}
csspositionmargin
29
kirby

何を期待していますかmargin-bottom要素がその上側に配置されている場合に行うことは？

margin-bottomは、エレメントにabsoluteプロパティがない場合にのみ、toply-positionedエレメントに対して何かを行います。

16
Niet the Dark Absol

これはあまりタイムリーな答えではないことは知っていますが、これを解決する方法はあります。 absolutelyに配置された要素内に、負の下部マージンと負の下部マージンと同じサイズの高さの「スペーサー」要素を追加できます。

HTML：

<div id="container">
    <div class="spacer"></div>
</div>

CSS：

// same container code, but you should remove the margin-bottom as it has no effect

// spacer code, made it a class as you may need to use it often
.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
37
Joey

構築 Joey's answer 、よりクリーンなマークアップのために、CSS :after- selectorを使用して、目的の下部マージンにスペーサーを追加します。

CSS

#container:after {
    position: absolute;
    content: "";
    bottom: -40px;
    height: 40px;
    width: 1px;
}
23
nik

positionを設定するには、relativeをmarginに設定する必要があります。

margin-bottom、margin-leftおよびmargin-right will [〜＃〜] not [〜＃〜]要素がposition: absolute。

例：HTML：

<img src="whatever.png"/>

CSS：

img {
   position: relative;
   margin: 0 auto;
}
2
Notlaw

私は解決策を見つけました!!!

コンテナの最小高さを設定し、位置を絶対位置から継承位置に変更する必要があり、topプロパティを選択した値に設定し、表示をインラインブロックにする必要があります。

これは、絶対位置を使用して、topプロパティで要素を移動し、マージンを追加しようとしたときに機能しました。

min-height: 42px;
display: inline-block;
top: 6px;
position: inherit;
0
Tom McDonough

ユースケースによっては、position: absoluteからposition: relativeはこの問題も解決します。位置を変更できる場合、問題を解決する最も簡単な方法になります。それ以外の場合、Joeyのスペーサーがトリックを行います。

0
Barth Zalewski

私は前もって高さがわからないので、代わりに、マージンにしたい高さで絶対的に配置されたの最後に目に見えない要素を追加しました。

私の場合、絶対に配置された要素はテーブルなので、高さ100pxの空の行を追加しました。次に、テーブルの下部にあるはずの境界線が、代わりに「tr：nth-​​last-of-type（2）td」に進みました。

お役に立てれば。

0
Dovev Hefetz