CSS top ominaisuus
- edellinen sivu text-underline-position
- Seuraava sivu transform
Määrittely ja käyttö
Top-ominaisuus määrittelee elementin ylä reunan. Tämä ominaisuus määrittelee sijoitetun elementin ylä reunan ja sen sisältävän alueen ylä reunan välinen etäisyys.
Huomautus:Jos "position"-ominaisuuden arvo on "static", "top"-ominaisuuden asettaminen ei aiheuta minkäänlaista vaikutusta.
Kuvaus
Static-elementeille auto; pituusarvoille vastaava absoluuttinen pituus; prosenttiarvoille määritetty arvo; muussa tapauksessa auto.
Suhteellisesti määritellyille elementeille, jos sekä top että bottom ovat auto, niiden laskettu arvo on 0; jos yksi niistä on auto, se otetaan toisen arvon vastakkaiseksi; jos molemmat eivät ole auto, bottom ottaa top-arvon vastakkaisen.
Katso myös:
CSS-opas:CSS-sijoittelu
HTML DOM -viittausopas:top-ominaisuus
Esimerkki
Aseta kuvan yläreuna 5 kuvapistettä sen sisältävän elementin yläreunan alapuolelle:
img { position:absolute; top:5px; }
CSS-kieli
top: auto|length|initial|inherit;
Ominaisuuden arvo
Arvo | Kuvaus |
---|---|
auto | Oletusarvo. Selain laskee yläreunan sijainnin. |
% | Aseta elementin yläreuna prosenttiosuuden avulla. Voit käyttää negatiivisia arvoja. |
length | Aseta elementin yläreuna px, cm jne. yksiköillä. Voit käyttää negatiivisia arvoja. |
inherit | Määritellään, että top-ominaisuuden arvo tulisi perittävät isältä elementiltä. |
Tekninen yksityiskohta
Oletusarvo: | auto |
---|---|
Perintä: | ei |
Versio: | CSS2 |
JavaScript-kieli: | object.style.top="50px" |
Lisää esimerkkejä
- Aseta kuvan yläreuna kiinteän arvon avulla
- Tämä esimerkki näyttää, miten voit asettaa kuvan yläreunan kiinteän arvon.
- Aseta kuvan yläreuna prosenttiosuuden avulla
- Tämä esimerkki näyttää, miten voit asettaa kuvan yläreunan prosenttiosuuden.
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka täysin tukee kyseistä ominaisuutta.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- edellinen sivu text-underline-position
- Seuraava sivu transform