position: relative und absolute im Zusammenspiel

dabblet.css

/**
 * position: relative und absolute im Zusammenspiel
 */
/*
 Zum "Debuggen" entferne bei der folgenden
 Regel einfach den Kommentar: */
* {
	/* outline: 1px solid black; */
}

aside.meta {
	/* Ein wenig Style basics für das Element */
	width: 33%;
	background-color: orange;
	border-radius: 4px;
	padding: 20px;
	font-family: sans-serif;
	
	/* !!! Setze das Element als relative um der
	   Rahmen für die darin gelegenen Elemente
	   mit posistion: absolute zu sein */
	position: relative;
	
	/* !!! Wir müssen dann natürlich den Platzbedarf
	   der Elemente wieder etwas ausgleichen. Am
	   In diesem Fall mit Padding: */
	padding-top:    33px;
	padding-bottom: 33px;
}

/* Damit unsere span-s einzelne Blöcke werden
   defnieren wir sie von einem Inline- zu einem
   Block: */
aside.meta > span {
	display: block;
}

aside.meta button {
	/* beide Buttons sind absolute, um sie
	   frei anordnen zu können */
	position: absolute;
	/* Jetzt geht die right Eigenschaft, um das Element
	   rechts zu positionieren. */
	right: 0;
}

aside.meta button.anmelden {
	/* Den Anmelde-Button setzen wir mit top oben an: */
	top: 1px;
}

aside.meta button.abmelden {
	/* Den Button zum Abmelden wollen an die Unterkante
	   ansetzen; also setzen wir die bottom Eigenschaft */
	bottom: 1px;
}

/* **** Es folgen die Interaktiva **** */
aside.meta button.abmelden {
	/* Da wir zusätzlich diesen Button erst zeigen wollen
	   wenn die Mouse über dem aside ist, verstecken wir
	   ihn erst einmal */
	visibility: hidden;
}
aside.meta:hover button.abmelden {
	visibility: visible;
}

aside.meta > span {
	height: 0px;      /* setze die Höhe auf 0 px */
	overflow: hidden; /* ...  sonst hat die 0px Höhe keinen Sinn */
}
aside.meta:hover > span {
	height: auto;
}

/* *** etwas Style für die Buttons *** */
button {
	cursor: pointer;
	background: #0a0;
	outline: none;
	border:  none;
	border-radius: 3px;
	color: white;
	font-size: 14px;
	text-shadow: 0px 1px 0px #666;
	box-shadow: #333 0px 1px 1px;
}
button.abmelden {
	background: #a30;
}

button:active {
	opacity: 0.75;
	box-shadow: none;
}

dabblet.html

<aside class="meta grid-one-third">
            <span>Donnerstags, 13:00 Uhr bis 16:00 Uhr</span>
            <span>Credits: <span class="credits">4</span></span>
            <span>SWS: 4</span>
            <span>Lehrende: Horst Mustermann</span>
            <button class="anmelden">anmelden</button>
            <button class="abmelden">abmelden</button>
</aside>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}