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

This article will explain in detail what are the position attributes in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Introduction to position attribute

(1) the position attribute in css has been available since CSS2, and this attribute specifies the positioning type of the element. All major browsers support the position attribute.

(2) there are four optional values for the position attribute in css: static, relative, absolute, and fixed. The following are introduced respectively. (there is actually an inherit, but this is unique to IE, so we won't discuss it here.)

Position:static (default)

1, basic introduction

(1) static is the default. Indicates that there is no positioning, or that it does not have positioning properties.

(2) if the element position attribute value is static (or the position attribute is not set), the element appears in the normal flow (ignoring the top,bottom,left,right or z-index declaration).

2, use the sample

Css:

Div {

Width:200px

Height:100px

Background-color:#C9FFFF

}

Html:

If we do not set the postion attribute value of the element, the default display effect is as follows:

2345 Screenshot 20180816103058.png

Position:relative (relative positioning)

1, basic introduction

(1) relative generates relative positioning elements, which are positioned relative to their normal positions.

(2) the process of relative positioning is as follows:

First, an element is generated by default (static) (and the element floats like a layer).

Then move relative to the previous position, the direction and magnitude of the movement are determined by the left, right, top, bottom properties, and the position before the offset remains unchanged.

2, sample code

The following code sets the text input box position to relative (relative positioning) and moves 15 pixels to the right and up relative to the default position.

Css:

Div {

Width:200px

Height:100px

Background-color:#C9FFFF

}

Input {

Position:relative

Left:15px

Top:-15px

}

Html:

This is the end of this article on "what are the position attributes in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out 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.