Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the position setting element positioning method in CSS, Xiaobian thinks it is quite practical, so share it for everyone to make a reference, I hope you can gain something after reading this article.

I. Introduction

The position property of CSS sets how elements are positioned, defining positioning rules for elements to be positioned. This property is useful for scripting animated effects.

1. Positioned element is an element whose position attribute is classified into relative (relative), absolute (absolute), fixed (fixed) or sticky (sticky) after calculation.

The top, right, bottom, and left attributes specify the location of the positioning element.

3. Z-index sets the stacking order of positioning elements, that is, the position on the z-axis. The value can be positive or negative. The larger the value, the closer it is to the user (that is, the higher the level of display). The smaller the value, the farther it is from the user.

As shown in the figure: z-index value of-1, the image position below the text, away from the user, and if the z-index value is set to a positive number, the image position is displayed above the text, covering part of the text!

If z-index is set to a positive value, the position of the image is displayed above the text, covering part of the text! left:20px; yes Image is 20px from left border; top:20px; yes Image is 20px from top

II. Value

static

This keyword causes the element to behave normally, i.e., the element is in its current layout position in the document flow, and the top, right, bottom, left, and z-index attributes are invalid.

relative

Use this keyword to lay out the element as if it had not been positioned. That is, it adapts to the location of the element without changing the layout (which leaves white space where the element originally was). position:relative has no effect on table-*-group, table-row, table-column, table-cell, table-caption.

absolute

No space is reserved for an element, and the element position is determined by specifying its offset from its nearest non-statically located ancestor element. Absolute positioned elements can be set to margins and do not merge with other margins.

fixed

No space is reserved for elements. Specifies the space of an element by specifying its position relative to the screen window, and the element's position does not change as the screen scrolls. Elements appear in fixed positions on each page of when printed. The fixed attribute usually creates a new stack environment.

About "how to use position to set the positioning of elements in css" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.