CSS-Eigenschaft inset
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Kurzform-Eigenschaft inset entspricht den Eigenschaften top, right, bottom und/oder left. Sie hat dieselbe Mehrwertsyntax wie die Kurzform margin.
Diese Inset-Eigenschaften, einschließlich inset, haben keine Auswirkung auf nicht positionierte Elemente.
Obwohl sie Teil des Moduls CSS logical properties and values ist, definiert sie keine logischen Offsets. Sie definiert physische Offsets, unabhängig vom Schreibmodus, der Textrichtung und der Textausrichtung des Elements.
Probieren Sie es aus
inset: 1em;
inset: 5% 0;
inset: 2em 50px 20px;
inset: 10px 30% 20px 0;
inset: 0;
<section id="default-example">
<div class="example-container">
<div id="example-element">I am absolutely positioned.</div>
<p>
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn
Hill.
</p>
</div>
</section>
.example-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* <length> values */
inset: 10px; /* value applied to all edges */
inset: 4px 8px; /* top/bottom left/right */
inset: 5px 15px 10px; /* top left/right bottom */
inset: 2.4em 3em 3em 3em; /* top right bottom left */
inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto;
inset: anchor-size(block) calc(anchor(50%) + 10px) auto
calc(anchor-size(width) / 4);
/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;
/* Keyword value */
inset: auto;
/* Global values */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;
Werte
Die Eigenschaft inset akzeptiert dieselben Werte wie die Eigenschaft top.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen: |
|---|---|
| Anwendbar auf | positionierte Elemente |
| Vererbt | Nein |
| Prozentwerte | relative to the containing block's size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | Längenangabe, Prozentsatz oder calc(); |
Formale Syntax
inset =
<'top'>{1,4}
<top> =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
Offsets für ein Element festlegen
HTML
<div>
<span class="exampleText">Example text</span>
</div>
CSS
div {
background-color: yellow;
width: 150px;
height: 120px;
position: relative;
}
.exampleText {
writing-mode: sideways-rl;
position: absolute;
inset: 20px 40px 30px 10px;
background-color: #c8c800;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset |
| CSS Positioned Layout Module Level 3 # propdef-inset |