CSS position ਪ੍ਰਾਪਰਟੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

position ਪ੍ਰੋਪਰਟੀ ਇਲੈਕਟ੍ਰੋਨਿਕ ਐਲੀਮੈਂਟ ਦੀ ਸਥਿਤੀ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

另请参阅：

CSS 教程：CSS 定位

HTML DOM 参考手册：position 属性

实例

定位 h2 元素：

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

亲自试一试

CSS 语法

position: static|absolute|fixed|relative|sticky|initial|inherit;

属性值

值 描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

ਇਸ ਲਈ, "left:20" ਵਿਅਕਤੀ ਦੇ LEFT ਸਥਾਨ ਨੂੰ 20 ਪਿਕਸਲ ਜੋੜੇਗਾ。
static ਮੂਲ ਮੁੱਲ: ਕੋਈ ਸਥਾਨਿਤ ਕਰਨ ਨਹੀਂ ਹੈ, ਵਿਅਕਤੀ ਨੂੰ ਨਾਲੇ ਦੀ ਸਾਧਾਰਣ ਪ੍ਰਵਾਹ ਵਿੱਚ ਦਿਸਾਇਆ ਜਾਵੇਗਾ (top, bottom, left, right ਜਾਂ z-index ਨੂੰ ਨਾ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ)。
inherit position ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਮੂਲ ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: static
ਵਿਰਾਸਤ: no
ਸੰਸਕਰਣ: CSS2
JavaScript ਸ਼ਾਬਦਿਕ object.style.position="absolute"

TIY ਉਦਾਹਰਣ

ਸਥਾਨਿਤ ਕਰਨ: ਸਥਾਨਿਤ ਕਰਨ
ਇਹ ਉਦਾਹਰਣ ਵਿੱਚ ਵਿਅਕਤੀ ਨੂੰ ਉਸ ਦੇ ਸਥਾਨਿਕ ਸਥਾਨ ਦੇ ਪ੍ਰਤੀ ਸਥਾਨਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦਿਸਾਇਆ ਗਿਆ ਹੈ。
ਸਥਾਨਿਤ ਕਰਨ: ਸਥਾਨਿਤ ਕਰਨ
ਇਹ ਉਦਾਹਰਣ ਵਿੱਚ ਵਿਅਕਤੀ ਨੂੰ ਸਥਾਨਿਤ ਕਰਨ ਲਈ ਸਥਾਨਿਤ ਕਰਨ ਦੇ ਸਥਾਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦਿਸਾਇਆ ਗਿਆ ਹੈ。
ਸਥਾਨਿਤ ਕਰਨ: ਸਥਾਈ ਸਥਾਨਿਤ ਕਰਨ
ਇਹ ਉਦਾਹਰਣ ਵਿੱਚ ਵਿਅਕਤੀ ਨੂੰ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੇ ਪ੍ਰਤੀ ਸਥਾਨਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦਿਸਾਇਆ ਗਿਆ ਹੈ。
ਵਿਅਕਤੀ ਦੇ ਰੂਪ ਨੂੰ ਸੈਟ ਕਰਨ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਵਿਅਕਤੀ ਦੇ ਰੂਪ ਨੂੰ ਸੈਟ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦਿਸਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਵਿਅਕਤੀ ਇਸ ਰੂਪ ਦੇ ਅੰਦਰ ਕਾਟਿਆ ਗਿਆ ਹੈ ਅਤੇ ਦਿਸਾਇਆ ਗਿਆ ਹੈ。
Z-index
Z-index ਇੱਕ ਵਿਅਕਤੀ ਨੂੰ ਦੂਜੇ ਵਿਅਕਤੀ ਦੇ ਬਾਅਦ ਰੱਖਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。
Z-index
ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ ਵਿਅਕਤੀ ਦਾ Z-index ਬਦਲਿਆ ਗਿਆ ਹੈ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਨੂੰ ਤਾਲੀਕਾ ਵਿੱਚ ਦਿਸਾਇਆ ਗਿਆ ਹੈ。

ਚਰਮੋਨਾ IE / ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
1.0 7.0 1.0 1.0 4.0