Fix the position of a layer by setting the position attribute in CSS_javascript tips

Definition and usage

The position attribute specifies the positioning type of the element.

Description

This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

默认值：	static
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

Example

Positioning h2 elements:

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

Browser support

All major browsers support the position attribute.

Note: The attribute value "inherit" is not supported in any version of Internet Explorer (including IE8).

Possible values

TIY Example

value

Description

absolute

值	描述
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 属性的值。

Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the

element is specified through the "left", "top", "right" and "bottom" attributes.

fixed

Generate an absolutely positioned element, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

relative

Generates a relatively positioned element, positioned relative to its normal position.

So "left:20" adds 20 pixels to the element's LEFT position.

static

Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

inherit

specifies that the value of the position attribute should be inherited from the parent element.

Positioning: Relative positioning This example demonstrates how to position an element relative to its normal position. Positioning: Absolute Positioning This example demonstrates how to position an element using absolute values. Positioning: Fixed Positioning This example demonstrates how to position an element relative to the browser window. Setting the Shape of an Element This example demonstrates how to set the shape of an element. The element is clipped into the shape and displayed. Z-indexZ-index can be used to place one element behind another element. Z-index The element in the example above has had its Z-index changed.

Let me introduce to you the Position attribute in CSS

CSS Position is very important and has the following values: static, relative, absolute, fixed.

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>

Static: static positioning. If you do not set the position attribute, the default is static. Attributes such as top, left, bottom, and right are invalid when static. To use these attributes, position must be set to one of the other three values.

Relative: Relative positioning. The element will adjust to the position it was in when it was statically positioned. The space allocated to the element in static positioning will still be allocated to it. The elements on either side of it will not move closer to it to fill that space, but they will also not move from the element's new position. Being pushed away. Absolute: Absolute positioning. The element will be positioned relative to the containing element. For example, if it is nested within another absolutely positioned element, it will be positioned relative to that element. Fixed: Fixed positioning. The element will be set to a fixed position on the browser and will not scroll with other elements. To put it figuratively, when the scroll bar is pulled up or down, the position of the fixed element on the screen does not change. It should be noted that IE6 does not support this attribute. Note: Many web pages are centered. In this way, when the elements are absolutely positioned, there will be deviations in the display at different resolutions. In this case, we can handle it through a method similar to the following: