CSS top ਪ੍ਰਾਪਰਟੀ
- ਪਿਛਲੀ ਪੰਨਾ text-underline-position
- ਅਗਲਾ ਪੰਨਾ transform
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
top ਗੁਣ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹੋਏ ਪਦਾਂ ਦੇ ਉੱਪਰੀ ਬਾਹਰੀ ਸਮੱਰਥਾ ਨੂੰ ਉੱਪਰੀ ਮੂਲ ਤੋਂ ਹਟਾਉਣਾ ਪੈਂਦਾ ਹੈ。
ਟਿੱਪਣੀ:ਜੇਕਰ "position" ਗੁਣ ਦਾ ਮੁੱਲ "static" ਹੈ ਤਾਂ "top" ਗੁਣ ਨੂੰ ਸੈਟ ਕਰਨ ਨਾਲ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਪੈਂਦਾ。
ਵਰਣਨ
static ਮੁੱਲ ਵਾਲੇ ਪ੍ਰਿੰਟ ਲਈ auto ਹੈ; ਲੰਬਾਈ ਮੁੱਲ ਲਈ ਸਬੰਧਤ ਅਬਜ਼ੋਲੂਟ ਲੰਬਾਈ; ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਲਈ ਸ਼ਾਰਟ ਵੈਲਿਊ; ਹੋਰ ਤਰੀਕੇ ਤੋਂ auto ਹੈ。
ਸਮੇਂ ਸਥਾਨਕ ਮੁੱਲਾਂ ਵਾਲੇ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ ਪਦਾਂ ਲਈ ਜੇਕਰ top ਅਤੇ bottom ਦੋਵੇਂ auto ਹਨ ਤਾਂ ਉਨ੍ਹਾਂ ਦੇ ਮੁੱਲ ਹਰੇਕ ਦੇ 0 ਹੋਣਗੇ; ਜੇਕਰ ਇੱਕ ਹੀ auto ਹੈ ਤਾਂ ਉਸ ਦੇ ਮੁੱਲ ਦੇ ਵਿਪਰੀਤ ਲਿਆ ਜਾਵੇਗਾ; ਜੇਕਰ ਦੋਵੇਂ ਨਹੀਂ ਹਨ ਤਾਂ bottom ਨੂੰ top ਦੇ ਮੁੱਲ ਦੇ ਵਿਪਰੀਤ ਲਿਆ ਜਾਵੇਗਾ。
ਹੋਰ ਦੇਖੋ:
CSS ਸਿੱਖਿਆCSS ਸਥਾਨਿਕਤਾ
HTML DOM ਸੂਚੀਬੱਧtop ਗੁਣ
ਉਦਾਹਰਣ
ਚਿੱਤਰ ਦੀ ਉੱਪਰੀ ਸੀਮਾ ਨੂੰ ਉੱਪਰੀ ਸਮੱਰਥਾ ਦੇ ਉੱਪਰੀ ਸੀਮਾ ਤੋਂ 5 ਪਿਕਸਲ ਹੇਠ ਸੈਟ ਕਰੋ:
img
{
position:absolute;
top:5px;
}
CSS ਗਰੰਟੇਜ਼਼
top: auto|length|initial|inherit;
ਗੁਣ ਮੁੱਲ
| ਮੁੱਲ | ਵਰਣਨ |
|---|---|
| auto | ਮੂਲ ਮੁੱਲ। ਬਰਾਉਜ਼ਰ ਵੱਲੋਂ ਉੱਪਰੀ ਸਥਾਨ ਦਾ ਮੁੱਲ ਹੱਲ ਕੀਤਾ ਜਾਵੇਗਾ。 |
| % | ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੌਰ 'ਤੇ ਉੱਪਰੀ ਸਥਾਨ ਸੈਟ ਕਰੋ। ਨੈਗਟਿਵ ਮੁੱਲਾਂ ਨੂੰ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。 |
| length | px, cm ਆਦਿ ਇਕਾਈਆਂ ਨਾਲ ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੌਰ 'ਤੇ ਉੱਪਰੀ ਸਥਾਨ ਸੈਟ ਕਰੋ। ਨੈਗਟਿਵ ਮੁੱਲਾਂ ਨੂੰ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。 |
| inherit | ਪ੍ਰਿੰਟ ਨੂੰ ਪ੍ਰਿੰਟ ਦੇ ਉੱਪਰੀ ਮੂਲ ਨੂੰ ਪ੍ਰਿੰਟ ਦੇ ਉੱਪਰੀ ਮੂਲ ਤੋਂ ਹਟਾਉਣਾ ਪੈਂਦਾ ਹੈ。 |
ਤਕਨੀਕੀ ਵੇਰਵਾ
| ਮੂਲ ਮੁੱਲ: | auto |
|---|---|
| ਮੁਰੀਦਤਾ: | no |
| ਸੰਸਕਰਣ: | CSS2 |
| JavaScript ਗਰੰਟੇਜ਼਼ | object.style.top="50px" |
ਹੋਰ ਉਦਾਹਰਣ
- ਸਥਿਰ ਮੁੱਲ ਨਾਲ ਚਿੱਤਰ ਦੀ ਉੱਪਰੀ ਸੀਮਾ ਸੈਟ ਕਰਨਾ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦੇਖਿਆ ਜਾਵੇਗਾ ਕਿ ਕਿਵੇਂ ਸਥਿਰ ਮੁੱਲ ਨਾਲ ਚਿੱਤਰ ਦੀ ਉੱਪਰੀ ਸੀਮਾ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- ਪ੍ਰਤੀਸ਼ਤ ਹਿੱਸੇ ਨਾਲ ਚਿੱਤਰ ਦੀ ਉੱਪਰੀ ਸੀਮਾ ਸੈਟ ਕਰਨਾ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦੇਖਿਆ ਜਾਵੇਗਾ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਸ਼ਤ ਹਿੱਸੇ ਨਾਲ ਚਿੱਤਰ ਦੀ ਉੱਪਰੀ ਸੀਮਾ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥਾ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਨੂੰ ਸਾਰੇ ਤੌਰ 'ਤੇ ਸੂਚੀਬੱਧ ਹੈ。
| ਚਰੋਮੇ | IE / ਐਜ਼ਡ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- ਪਿਛਲੀ ਪੰਨਾ text-underline-position
- ਅਗਲਾ ਪੰਨਾ transform
