it-swarm.com.de

Stellen Sie die absolute Position und den Rand ein

Ich möchte das position eines Elements auf absolute setzen und habe ein margin-bottom, aber es scheint, dass die margin-bottom hat keine Wirkung.

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
}
29
kirby

Was erwarten Sie margin-bottom zu tun, wenn Ihr Element an seiner Oberseite positioniert ist?

margin-bottom führt nur dann etwas mit einem absolutely-positionierten Element aus, wenn das Element keine top -Eigenschaft hat.

16

Ich weiß, dass dies keine sehr aktuelle Antwort ist, aber es gibt einen Weg, dies zu lösen. Sie können ein "spacer" -Element innerhalb des Elements hinzufügen, das absolutely mit einem negativen unteren Rand und einer Höhe, die der Größe des negativen unteren Randes entspricht, positioniert ist.

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

Aufbauend auf Joeys Antwort verwenden Sie für ein saubereres Markup das CSS :after- Selektor, um einen Abstandhalter für den gewünschten unteren Rand hinzuzufügen.

CSS

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

Sie müssen position auf relative setzen, um dessen margin zu setzen.

Das margin-bottom, margin-left und margin-right wird NICHT funktionieren, wenn das Element in position: absolute.

Beispiel: HTML:

<img src="whatever.png"/>

CSS:

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

Ich habe die Lösung gefunden !!!

wenn Sie eine minimale Höhe des Containers festlegen, muss die Position von "absolut" in "erben" geändert werden. Setzen Sie die Eigenschaft "top" auf einen Wert Ihrer Wahl und die Anzeige muss inline blockiert sein.

Dies funktionierte für mich, als ich versuchte, die absolute Position zu verwenden, das Element mit der Eigenschaft top zu verschieben und einen Rand hinzuzufügen.

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

In einigen Anwendungsfällen kann durch Ändern von position: absolute bis position: relative löst auch dieses Problem. Wenn Sie Ihre Position ändern können, ist dies der einfachste Weg, um das Problem zu lösen. Ansonsten macht der Spacer von Joey den Trick.

0
Barth Zalewski

Da ich die Höhe im Voraus nicht kenne, habe ich stattdessen ein unsichtbares Element am Ende der absolut positionierten mit einer Höhe hinzugefügt, die ich für den Rand haben wollte.

In meinem Fall ist das absolut positionierte Element eine Tabelle, daher habe ich eine zusätzliche leere Zeile mit einer Höhe von 100px hinzugefügt. Dann ging der Rand, der sich am Ende der Tabelle befinden sollte, stattdessen auf "tr: ​​n-last-of-type (2) td".

Hoffe das hilft.

0
Dovev Hefetz