CSS ترتیب - نمودار position
- پچھلے پیج CSS کا زیادہ سائز
- پچھلے پیج CSS کا زیرو کا پوزیشن
پوزیشن ਪ੍ਰਤੀਯੋਗੀਤਾ ਨਿਯਮ ਵਿਸ਼ੇਸ਼ ਰੂਪ ਨਾਲ ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਸਥਾਨਕ ਰੂਪ ਦੀ ਕਿਸਮ (static, relative, fixed, absolute ਜਾਂ sticky) ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹਨ।
position ਪ੍ਰਤੀਯੋਗਿਤਾ
پوزیشن ਪ੍ਰਤੀਯੋਗਿਤਾ ਅਪਣਾਏ ਜਾਣ ਵਾਲੇ ਅੰਗਣ ਦੇ ਸਥਾਨਿਤੀ ਤਰੀਕੇ ਦੀ ਕਿਸਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。
ਪੰਜ ਵੱਖ ਸਥਾਨ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਹਨ:
- static
- relative
- fixed
- absolute
- sticky
ਅੰਗਣ ਲਈ top, bottom, left ਅਤੇ right ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਪਰ ਜੇਕਰ ਪਹਿਲਾਂ position ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈਟ ਨਹੀਂ ਕੀਤੀ ਗਈ ਤਾਂ ਇਹ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ। ਵੱਖ-ਵੱਖ position ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਦੇ ਅਨੁਸਾਰ ਉਹ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ。
position: static;
HTML ਅੰਗਣ ਦੇ ਮੂਲਤਬੀ ਸਥਾਨਿਤੀ ਤਰੀਕਾ static (ਸਥਾਨਿਕ) ਹੈ。
static ਸਥਿਤੀਬੱਧ ਅੰਗਣ ਨੂੰ top, bottom, left ਅਤੇ right ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਦੇ ਪ੍ਰਭਾਵ ਤੋਂ ਮੁਕਤ ਹਨ。
position: static; ਦੇ ਅੰਗਣ ਕਿਸੇ ਵੀ ਵਿਸ਼ੇਸ਼ ਤਰੀਕੇ ਨਾਲ ਸਥਾਨਿਤ ਨਹੀਂ ਹੁੰਦੇ; ਉਹ ਹਮੇਸ਼ਾ ਪੰਨੇ ਦੇ ਆਮ ਸਰਵਸ਼ਕਤੀ ਨਾਲ ਸਥਾਨਿਤ ਹੁੰਦੇ ਹਨ:
ਇਹ ਵਰਤੇ ਹੋਏ CSS ਹਨ:
example
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; ਦੇ ਅੰਗਣ ਆਮ ਸਥਾਨ ਨੂੰ ਸਥਾਨਿਤ ਕਰਦੇ ਹਨ。
ਸਥਿਤੀਬੱਧ ਸਥਾਨ ਦੇ ਅੰਗਣ ਦੇ top, right, bottom ਅਤੇ left ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਸੈਟ ਕਰਨ ਨਾਲ ਉਹ ਆਮ ਤੌਰ 'ਤੇ ਸਥਾਨ ਤੋਂ ਬਾਹਰ ਹੋ ਜਾਣਗੇ ਅਤੇ ਸਾਰੇ ਹੋਰ ਸਮੱਗਰੀ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਸਥਾਨ ਛੱਡਣਗੇ ਨਹੀਂ。
ਇਹ ਵਰਤੇ ਹੋਏ CSS ਹਨ:
example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
position: fixed; ਦੇ ਅੰਗਣ ਸਾਹਮਣੇ ਸਥਾਨ ਨੂੰ ਸਥਾਨਿਤ ਕਰਦੇ ਹਨ, ਮਤਲਬ ਹੈ ਕਿ ਹਰ ਵੇਲੇ ਉਹ ਇੱਕ ਜਗ੍ਹਾ 'ਤੇ ਹੈ। top, right, bottom ਅਤੇ left ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਇਸ ਅੰਗਣ ਨੂੰ ਸਥਾਨਿਤ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ。
ਸਥਿਤੀਬੱਧ ਸਥਾਨ ਦੇ ਅੰਗਣ ਪੰਨੇ ਵਿੱਚ ਆਮ ਤੌਰ 'ਤੇ ਸਥਾਨ ਵਿੱਚ ਖਾਲੀ ਜਗ੍ਹਾ ਨਹੀਂ ਛੱਡਦੇ。
ਪੰਨੇ ਦੇ ਦਾਹਨ ਦੇ ਉੱਪਰੋਕਤ ਇਹ ਸਥਿਤੀਬੱਧ ਅੰਗਣ ਧਿਆਨ ਦੇਵੋ। ਇਹ ਵਰਤੇ ਹੋਏ CSS ਹਨ:
example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; ਦੇ ਅੰਗਣ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਸਥਿਤੀਬੱਧ ਸ਼ਾਸਕ ਨੂੰ ਸਥਾਨਿਤ ਕਰਦੇ ਹਨ (ਨਹੀਂ ਕਿ ਸਾਹਮਣੇ ਸਥਾਨ ਨੂੰ ਸਥਾਨਿਤ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ fixed)。
ਪਰ ਜੇਕਰ ਸਥਿਤੀਬੱਧ ਸਥਾਨ ਦੇ ਸ਼ਾਸਕ ਨਹੀਂ ਹਨ, ਤਾਂ ਉਹ ਦਸਤਾਵੇਜ਼ ਦੇ ਮੁੱਖ ਸਮੱਗਰੀ (body) ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ ਅਤੇ ਪੰਨੇ ਸਰਕਰਣ ਨਾਲ ਸਰਕਰਣ ਕਰੇਗਾ。
note:“ਸਥਿਤੀਬੱਧ” ਅੰਗਣ ਉਸ ਸਥਾਨ ਦੀ ਸਥਿਤੀ ਹੈ ਜੋ ਉਹ ਸਥਾਨ ਹੈ static ਬਾਕੀ ਕੋਈ ਵੀ ਅੰਗਣ。
ਇਹ ਇੱਕ ਸਾਦਾ ਉਦਾਹਰਣ ਹੈ:
ਇਹ ਵਰਤੇ ਹੋਏ CSS ਹਨ:
example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
position: sticky; elements according to the user's scroll position.
sticky elements are positioned relative to the scroll position of the element.relative）and fixed (fixed）between switching. Initially it will be relatively positioned until it meets the given offset position in the viewport - then it will be 'pasted' at the appropriate position (such as position:fixed).
note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). You must also specify at least بٹٹم、راست、bottom or بائیں one, so that sticky positioning takes effect.
In this example, when the sticky element reaches its scroll position, it will stay at the top of the page (top: 0）。
example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Overlapping elements
When positioning elements, they can overlap other elements.
زیرو کا پوزیشن property specifies the stacking order of the element (which element should be placed in front of or behind other elements).
Elements can be set to positive or negative stacking order:
This is a title
Since the z-index of the image is -1, it is behind the text.
example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
elements with a higher stacking order are always in front of elements with a lower stacking order.
note:if two positioned elements overlap and are not specified زیرو کا پوزیشنthen the last element in the HTML code will be displayed at the top.
position text in the image
how to place text on an image:
example
try it yourself:
more examples
- set the shape of the element
- This example demonstrates how to set the shape of an element. The element is clipped to this shape and displayed.
all CSS positioning properties
| property | description |
|---|---|
| bottom | set the bottom margin edge of the positioning box. |
| clip | مکمل پوزیشن کا عنصر کو کپت کرنا |
| بائیں | پوزیشن کا باکس کی بائیں مارگ کی کوسٹ کو سیٹ کرنا |
| پوزیشن | عنصر کی پوزیشن کا نوعیت طے کرنا |
| راست | پوزیشن کا باکس کی راست مارگ کی کوسٹ کو سیٹ کرنا |
| بٹٹم | پوزیشن کا باکس کی اوپر مارگ کی کوسٹ کو سیٹ کرنا |
| زیرو کا پوزیشن | عنصر کی تیار کی کچھ کا پوزیشن کو سیٹ کرنا |
- پچھلے پیج CSS کا زیادہ سائز
- پچھلے پیج CSS کا زیرو کا پوزیشن
