What is the positioning of css? Summary of css positioning

This article brings you what is the positioning of css? The summary of CSS positioning has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Positioning is divided into:

static (default): This is The default value of the position attribute of page elements. The elements will be arranged according to the browser's arrangement rules for elements in the web page.

Note: Setting left, right, top, and bottom to the element at this time has no effect.

relative (relative positioning): Positioning relative to its original position! If position has not been set before or the position value is static, then after setting relative, the position of the element's left, right, top, and bottom will be moved with reference to its original position .

absolute (absolute positioning): Everyone should be familiar with this, that is, positioning that is separated from the document flow. The positioning reference object is its own parent, but its own parent must have the position attribute (it does not work if the parent's position attribute is static, it must be one of absolute, relative, and fixed). If its parent does not set the position attribute, it will look upwards for ancestor elements that have a position attribute and are not static, until the body element.

fixed (fixed positioning): This attribute is used to position the element relative to the browser window. No matter how you move your slider, it will be fixed. At a fixed position relative to the browser window, also note that its sibling elements will ignore its presence in positioning. The top, bottom, left, and right used at this time are also relative to the browser window.

Let me share my experience below:

1. Fixed will cause compatibility issues. The old IE6 does not support it. It is positioned relative to the browser!

2. The parent element has a position attribute (not static) and a padding value. If the child element only sets absolute, then

will not ignore the padding value of the parent element. If left: 0 is set , top:0 will ignore the padding value of the parent element.

3. Share the horizontal centering method of an element with absolute attribute:

Method 1: Normally we use left: 50%, and then margin-left: -width/2 To set the horizontal centering, I will share a method below. If you are asked about the horizontal centering method during the interview, you can add the following method, extra points!

Method 2: Set the child elements: left: 0, right: 0, and then set margin: 0 auto to center it horizontally.

4. Everyone should pay attention to what changes will occur when setting float and margin after setting position. This is very important and will be discussed with you later.

Related recommendations:

CSS3 animation properties: Introduction to the transform property

Code for implementing bubble boxes using pseudo elements in CSS3 ( before, after)

The above is the detailed content of What is the positioning of css? Summary of css positioning. For more information, please follow other related articles on the PHP Chinese website!