position-visibility

Syntax

/* Single values */
position-visibility: always;
position-visibility: anchors-visible;
position-visibility: no-overflow;

/* Global values */
position-visibility: inherit;
position-visibility: initial;
position-visibility: revert;
position-visibility: revert-layer;
position-visibility: unset;

Werte

always

Das positionierte Element wird immer angezeigt.

anchors-visible

Wenn der Anker vollständig verborgen ist, sei es durch Überlaufen seines übergeordneten Elements (oder des Ansichtsfensters) oder durch Überdeckung durch andere Elemente, wird das positionierte Element stark ausgeblendet.

no-overflow

Wenn das positionierte Element beginnt, sein übergeordnetes Element oder das Ansichtsfenster zu überlaufen, wird es stark ausgeblendet.

Die Spezifikation definiert auch den Wert anchors-valid, der noch in keinem Browser implementiert wurde.

Beschreibung

In einigen Situationen möchten Sie eventuell ein ankerpositioniertes Element nicht anzeigen. Beispielsweise, wenn sein zugehöriger Anker aus dem Sichtbereich gescrollt wurde, aber das ankerpositionierte Element ansonsten noch teilweise oder vollständig sichtbar wäre, könnte es unklar sein, worauf es sich bezieht, und unnötig Platz beanspruchen. Daher möchten Sie es möglicherweise vollständig ausblenden.

Die position-visibility Eigenschaft kann verwendet werden, um das ankerpositionierte Element always anzuzeigen oder bedingt auszublenden, wenn das zugehörige Ankerelement vollständig verborgen ist (anchors-visible) oder wenn das ankerpositionierte Element selbst teilweise verborgen ist (no-overflow).

Wenn ein Element aufgrund von position-visibility ausgeblendet wird, wird es als stark ausgeblendet bezeichnet. Dies bedeutet, dass es so behandelt wird, als ob es und seine untergeordneten Elemente einen visibility Wert von hidden hätten, unabhängig davon, welchen tatsächlichen Sichtbarkeitswert sie haben.

position-visibility sollte nur in Situationen verwendet werden, in denen es bevorzugt wird, das positionierte Element vollständig auszublenden. In den meisten Fällen macht es mehr Sinn, zu versuchen, die Platzierung der positionierten Elemente zu ändern, wenn sie zu überlaufen beginnen, um sie auf dem Bildschirm und nutzbar zu halten. Dies kann mit der position-try-fallbacks Eigenschaft und der @position-try At-Regel erreicht werden. Siehe den Leitfaden zu Fallback-Optionen und bedingtem Ausblenden bei Überlauf für weitere Informationen.

Formale Definition

Formale Syntax

position-visibility = 
  always                                              |
  [ anchors-valid || anchors-visible || no-overflow ]  

Beispiele

Grundlegende Nutzung

Dieses Beispiel ermöglicht das Ändern des Werts der position-visibility Eigenschaft eines ankerpositionierten Elements, um die Effekte der einzelnen Werte zu demonstrieren.

HTML

Wir spezifizieren zwei <div> Elemente: ein Ankerelement mit der Klasse anchor und ein positioniertes Element mit der Klasse infobox.

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

<form>
  <fieldset>
    <legend>Choose position visibility</legend>
    <div>
      <label for="radio-always">always</label>
      <input
        type="radio"
        id="radio-always"
        name="position-visibility"
        value="always"
        checked />
    </div>
    <div>
      <label for="radio-anchors-visible">anchors-visible</label>
      <input
        type="radio"
        id="radio-anchors-visible"
        name="position-visibility"
        value="anchors-visible" />
    </div>
    <div>
      <label for="radio-no-overflow">no-overflow</label>
      <input
        type="radio"
        id="radio-no-overflow"
        name="position-visibility"
        value="no-overflow" />
    </div>
  </fieldset>
</form>

Das HTML enthält auch Fülltext, um den Inhalt länger als das Ansichtsfenster zu machen, sodass Scrollen erforderlich ist. Wir haben auch ein <fieldset> mit einer Gruppe von Radio-Inputs mit verschiedenen position-visibility Werten eingefügt. Das Markup dafür wird der Kürze halber nicht gezeigt.

CSS

Wir stylen ein anchor <div> als Ankerelement und verknüpfen das infobox <div> damit. Der relevante CSS-Code ist wie folgt:

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

form {
  position: fixed;
  background: white;
  bottom: 2px;
  right: 2px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

.anchor {
  anchor-name: --my-anchor;
}

.infobox {
  position-anchor: --my-anchor;
  position: fixed;
  position-area: top span-all;
  margin-bottom: 5px;
  position-visibility: always;
}

JavaScript

Wir fügen einen change Ereignishandler bei den Radio-Knöpfen ein, sodass, wenn ein neuer Wert ausgewählt wird, wir den Wert der position-visibility Eigenschaft des Infobox-Elements aktualisieren.

const infobox = document.querySelector(".infobox");
const radios = document.querySelectorAll('[name="position-visibility"]');

for (const radio of radios) {
  radio.addEventListener("change", setPositionVisibility);
}

function setPositionVisibility(e) {
  infobox.style.positionVisibility = e.target.value;
}

Ergebnis

Wählen Sie verschiedene position-visibility Werte aus und scrollen Sie dann die Seite auf und ab, um deren Effekte zu sehen. Mit position-visibility: always wird das positionierte Element nicht ausgeblendet. Mit position-visibility: anchors-visible wird das positionierte Element nur sichtbar sein, wenn der Anker teilweise oder vollständig im Sichtbereich ist. Mit position-visibility: no-overflow wird das positionierte Element ausgeblendet, sobald es beginnt, das Ansichtsfenster zu überlaufen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• anchor-name
• position-anchor
• position
• position-area
• CSS-Ankerpositionierung Modul
• Verwendung der CSS-Ankerpositionierung Leitfaden
• Leitfaden zu Fallback-Optionen und bedingtem Ausblenden bei Überlauf