top

  • Adressname der Version: Web/CSS/Top
  • Titel der Version: top
  • ID der Version: 499449
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

{{ CSSRef() }}

Übersicht

Die top Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der position Eigenschaft notiert, wenn für die Positionsart der Wert absolute, fixed oder relative definiert wurde.

Bei absolut positionierten Elementen (position: absolute oder position: fixed) wird der Abstand zwischen der oberen, äußeren Kante (margin edge) des Elements und der oberen Kante des umschließenden Blocks definiert.

Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die top Eigenschaft definiert wurde, überschreibt diese den Wert der bottom Eigenschaft. Wenn top den Wert auto besitzt, ist der berechnete Wert für bottom gleich dem Wert der top Eigenschaft mit umgedrehtem Vorzeichen.
Wenn beide Eigenschaften nicht den Wert auto besitzen, wird bottom ignoriert und auf auto gesetzt.

{{cssbox("top")}}

Syntax

top: {{csssyntax("left")}}

Werte

<Länge>
Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.
<Prozentzahl>
Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.
auto
Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch bottom, margin, padding oder durch die Höhe.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

element { 
    position: absolute;
    top: 20px; 
    height: 200px;
    border: 1px solid #000;
}

Spezifikation

Specification Status Anmerkung
{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}} {{Spec2('CSS3 Transitions')}} top annimierbar
{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}} {{Spec2('CSS2.1')}} Standartwert

Browser Kompatibilität

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("1")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{Co

 

Siehe auch

{{ languages( { "en": "en/CSS/top", "es": "es/CSS/top" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id=".C3.9Cbersicht">Übersicht</h2>
<p>Die <code>top</code> Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der <a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a> Eigenschaft notiert, wenn für die Positionsart der Wert <code>absolute</code>, <code>fixed</code> oder <code>relative</code> definiert wurde.</p>
<p>Bei absolut positionierten Elementen (<code>position: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der oberen, äußeren Kante (<em>margin edge</em>) des Elements und der oberen Kante des umschließenden Blocks definiert.</p>
<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die <code>top</code> Eigenschaft definiert wurde, überschreibt diese den Wert der <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> Eigenschaft. Wenn <code>top</code> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> gleich dem Wert der <code>top</code> Eigenschaft mit umgedrehtem Vorzeichen.<br />
 Wenn beide Eigenschaften nicht den Wert <code>auto</code> besitzen, wird <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> ignoriert und auf <code>auto</code> gesetzt.</p>
<p>{{cssbox("top")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
top: {{csssyntax("left")}}
</pre>
<h3 id="Werte">Werte</h3>
<dl>
 <dt>
  &lt;Länge&gt;</dt>
 <dd>
  Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd>
 <dt>
  &lt;Prozentzahl&gt;</dt>
 <dd>
  Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd>
 <dt>
  auto</dt>
 <dd>
  Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/height" title="de/CSS/height">Höhe</a>.</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<pre>
element { 
    position: absolute;
    top: 20px; 
    height: 200px;
    border: 1px solid #000;
}
</pre>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>top</code> annimierbar</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Standartwert</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Kompatibilit.C3.A4t">Browser <span>Kompatibilität</span></h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatGeckoDesktop("1")}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Chrome for Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{Co</td>
   </tr>
  </tbody>
 </table>
</div>
<p>&nbsp;</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a></li>
 <li><a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a>, <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/De/CSS/Right" title="De/CSS/Right"><code>right</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/top", "es": "es/CSS/top" } ) }}</p>
Zu dieser Version zurücksetzen