CSS top Eiendom
Voorbeeld
Stel die boonste rand van die geposisioneerde <div>-element 50px af vanaf die boonste rand van sy naaste geposisioneerde voorouer:
div {
position: absolute;
top:
50px;
border: 3px solid green;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die top
eienskap beïnvloed die vertikale posisie van 'n geposisioneerde element. Hierdie eienskap het geen effek op nie-geposisioneerde elemente nie.
- Indien posisie: absoluut; of posisie: vas; - die
top
eienskap stel die boonste rand van 'n element na 'n eenheid bo/onder die boonste rand van sy naaste geposisioneerde voorouer. - Indien posisie: relatief; - die
top
eienskap laat die element se boonste rand bo/onder sy normale posisie beweeg. - Indien posisie: taai; - die
top
eiendom tree op asof sy posisie relatief is wanneer die element binne die uitsigpoort is, en asof sy posisie vas is wanneer dit buite is. - Indien posisie: staties; - die
top
eiendom het geen effek nie.
Standaard waarde: | outo |
---|---|
Geërf: | geen |
Animateerbaar: | ja. Lees oor animeerbaar |
Weergawe: | CSS2 |
JavaScript-sintaksis: | voorwerp .style.top="100px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
CSS-sintaksis
top: auto|length|initial|inherit;
Eiendomswaardes
Value | Description | Play it |
---|---|---|
auto | Lets the browser calculate the top edge position. This is default | |
length | Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units | |
% | Sets the top edge position in % of containing element. Negative values are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelde
Voorbeeld
Gebruik die boonste eiendom met 'n negatiewe waarde en vir 'n element sonder geposisioneerde voorouers:
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
Verwante bladsye
CSS-tutoriaal: CSS-posisionering
CSS verwysing: onderste eiendom
CSS verwysing: linker eiendom
CSS verwysing: regte eiendom
HTML DOM verwysing: top eiendom