Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:CSS-logisch-6.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Positionierung mit inset-inline-start</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 35em;
}
.card {
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.box {
position: relative;
width: 8em;
aspect-ratio: 1/1;
border-radius: .5em;
display: flex;
align-items: center;
justify-content: center;
margin-block-end: 1em;
}
.blue { background: #dbeafe; }
.green { background: #dcfce7; }
.badge {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
transform: translate(50%, -50%);
background: red;
color: white;
font-size: 80%;
padding: .3em .5em;
border-radius: 50%;
text-align: center;
}
.message {
position: relative;
background: #e5e7eb;
padding: 1em;
border-radius: 1em;
max-width: 12em;
}
.timestamp {
position: absolute;
inset-inline-end: 0.5em;
inset-block-end: 0.5em;
font-size: 75%;
color: #555;
}
.rtl {
direction: rtl;
text-align: right;
}
</style>
</head> <body>
Positionierung mit inset-inline-start und inset-inline-end
Deutsch (LTR)
Profil
3
العربية (RTL)
الملف
٣
Die absolute Positionierung der Badge und des Timestamps richten sich je nach Schreibrichtung rechts oder links am Ende des Blocks aus.
</body> </html>
