Three basic positioning mechanisms in CSS

CSS positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

In the following chapters, we will give you a detailed explanation of relative positioning, absolute positioning, and floating.

CSS Position Properties

By using the Position property, we can select 4 different types of positioning, which affects how the element box is generated.

Position the meaning of the property value:

Static

The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations). The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

Relative

The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Absolute

The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Fixed

The element box behaves like the position is set to absolute, but its containing block is the window itself.

Inherit

Specifies that the value of the position property should be inherited from the parent element.

tip: relative positioning is actually considered part of the normal flow positioning model, because the position of the element is relative to its position in the normal stream.

CSS relative positioning

The element box set to relative positioning offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Relative positioning is a very easy-to-grasp concept. If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position.

Note that when using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.

CSS Absolute Positioning

An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.

The layout of other elements in the normal stream is like an absolutely positioned element that does not exist.

The main problem with positioning is to remember the meaning of each location. So now let's review what we've learned: relative positioning is the initial position of the "relative to" element in the document, and the position of the absolutely positioned element is relative to the nearest positioned ancestor element, and if the element does not have a positioned ancestor, its position is relative to the original containing block .

Note: Depending on the user agent, the original containing block might be a canvas or HTML element.

tip: because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page. You can control the stacking order of these boxes by setting the Z-index property.

CSS Floating

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.

The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element.

If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

Line boxes and cleanup

The row box next to the float box is shortened to make room for the floating box, and the row box surrounds the float box.

Therefore, creating a floating box allows the text to surround the image:

To prevent a row box from wrapping around a floating box, you need to apply the clear property to the box. The value of the clear property can be left, right, both, or none, which indicates which sides of the box should not be next to the floating box.

To achieve this effect, add enough space on the top margin of the element to be cleaned so that the topmost edge of the element drops vertically below the floating box:

This is a useful tool that allows the surrounding elements to make room for floating elements.

Let's look at floats and cleanup in more detail. Suppose you want to float a picture to the left of a block of text, and you want the picture and text to be contained in another element with a background color and border. You might write the following code:

. News {background-color:gray;border:solid 1px black;}. News img {float:left;}. News p {float:right;} <p class= "News" ><p>some text</p></p>

In this case, there is a problem. Because floating elements are out of the document flow, p, which surrounds the picture and text, does not occupy space.

How can surround elements visually surround floating elements? You need to apply clear somewhere in this element:

Unfortunately there is a new problem, because no existing elements can be used to clean up, so we can only add an empty element and clean it up.

. News {background-color:gray;border:solid 1px black;}. News img {float:left;}. News p {float:right;} <p class= "News" ><p>some text</p></p>

This will achieve the effect we want, but we need to add extra code. There are often elements that can be applied to clear, but sometimes you have to add meaningless tokens for layout purposes.

But there is another way we can do that is to float the container p:

. News {background-color:gray;border:solid 1px black;float:left;}. News img {float:left;}. News p {float:right;} <p class= "News" ><p>some text</p></p>

This will get the effect we want. Unfortunately, the next element is affected by this floating element. To solve this problem, some people choose to float everything in the layout, and then use the appropriate meaningful elements (often the footer of the site) to clean up the floats. This helps to reduce or eliminate unnecessary markup.

The use of negative margins on the floating module can be covered on the corresponding floating module, the margin property of negative margins does not affect the location of other modules, his mobile reference point is based on its own reference. This is significantly different from the positive margin. The positive margin is moved by the position of the adjacent module, and the surrounding modules are appropriately excluded .

Element centered:

It's not easy to use CSS to center the elements-the same legal CSS centering setting behaves differently in different browsers. Let's take a look at some common ways in CSS that let elements be centered horizontally.

1. Centering with automatic margin
The preferred way to center elements horizontally in CSS is to use the margin property-set the Margin-left and Margin-right properties of the element to auto. In practical use, we can create a container-action p for these elements that need to be centered. It is important to note that you must specify a width for the container:

P#container {Margin-left:auto;　　Margin-right:auto;　　width:168px; }

In most major browsers, this approach is very effective, even in the Windows platform IE6, in its standard compatibility mode (compliance mode) can be displayed normally. Unfortunately, in the lower version of IE, this setting does not achieve a center effect. So if you want to use this approach in a real project, make sure that the user's IE browser version is no less than 6.0.
Although not satisfactory in terms of support, most designers recommend using this approach as much as possible. This method is also considered to be the most correct and reasonable one in all kinds of CSS to implement the horizontal centering method of elements.
2. Using Text-align to achieve centering
Another way to center the element is to use the Text-align property, set the property value to center, and apply it to the BODY element. This approach is downright hack, but it is compatible with most browsers, so it is naturally necessary in some cases.
It is hack because this method does not apply the text attribute to the text, but instead applies it to the element that is the container. This also brings us extra work. After creating the required p for the layout, we will apply the Text-align property to the body as follows:

body{Text-align:center; }

What will happen after that? All descendant elements of the body are displayed in the center.
Therefore, we need to write another rule to get the text back to the default left-aligned:

p {text-align:left; }

It can be imagined that this additional rule will bring some inconvenience. In addition, a browser that truly complies with the standard does not change the location of the container, but only the text that is centered on it.
3. Combining automatic margins with text alignment
Because the text alignment is well-backward compatible, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two to maximize the cross-browser support for the center effect:

body {text-align:center;　　} #container {Margin-left:auto;　　Margin-right:auto;　　border:1px solid red;　　width:168px; Text-align:left}

But it's always a hack, but it's not perfect anyway. We still need to write additional rules for the text in the center container, but at least it looks good in every browser.
4. Negative margin Solution
A negative margin solution is far from simply adding negative margins to elements. This approach requires both absolute positioning and negative margin techniques.
The following is a concrete implementation of this scenario. First, create a container that contains the center element, and then position it absolutely at 50% relative to the left edge of the page. The left margin of the container is then calculated from the position of page 50% width.
Then, set the container's left margin value to half the width of the negative container. This secures the container to the midpoint in the horizontal direction of the page.

#container {background: #ffc URL (mid.jpg) repeat-y Center;　　Position:absolute;　　left:50%;　　width:760px;　　Margin-left: -380px; }

Look, there's no hack!. While this is not the preferred solution, it's a great way to do it, and it's very versatile-even in Netscape Navigator 4.x, it's amazing, isn't it? So if you want to get the widest range of browser support, this approach will be the best choice.

Replacement and non-replaceable elements:

Elements are the basis of a document's structure, and in CSS, each element generates a box containing the contents of the Element (box, also translated as "box"). However, different elements are displayed differently, such as <p> and <span>, and <strong> and <p> are not the same. Different types are prescribed for different elements in a document type definition (DTD), which is one of the reasons why a DTD is important to a document.

1. Replacement and non-replaceable elements

From the characteristics of the elements themselves, can be divided into replacement and non-replaceable elements.

a) Replace element

The replacement element is that the browser determines the specific display of the element based on the tag and attributes of the element.

For example, the browser will read the image information according to the value of the SRC attribute of the tag and display it, and if the (X) HTML code is viewed, the actual content of the picture is not visible, for example, depending on the type property of the <input> tag, the input box is displayed. Or a radio button, and so on.

X , <input>, <textarea>, <select>, <object> in HTML are all replacement elements. These elements often have no actual content, which is an empty element, such as:

<input type= "Submit" name= "submit" value= "Submit"/>

The browser displays these elements based on the label type and attributes of the element. The replaceable element also generates a box in its display.

b) Non-replaceable elements

X Most elements of HTML are non-replaceable elements, meaning that their content is displayed directly to the client (for example, a browser). For example:

<p> content of the paragraph </p>

Paragraph <p> is a non-replaceable element, the text "paragraph content" is all displayed.

2. Display elements

In addition to the classification of replaceable and non-replaceable elements, elements in CSS 2.1 have different classifications: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).

A) block-level elements

The most obvious feature of an element that is visually formatted as a block is that it fills the content area of its parent element horizontally by default, and there are no other elements on either side of it, that is, block-level elements are exclusive by default.

Typical block-level elements are:<p>, <p>,

The float (float property, float left or right) is set by CSS, and the setting display property for "block" or "List-item" is a block-level element.

However, floating elements are special, and because of the float, there may be other elements next to them. The "List-item" (list item <li>) generates a dot symbol, or a number ordinal, in front of it.

b) in-line elements

Inline elements do not form new chunks of content, that is, they can have other elements around them, such as <a>, <span>, <strong>, and so on, are typical inline-level elements.

Elements with the display property equal to "inline" are all inline elements. Almost all of the replaceable elements are inline elements, such as , <input>, and so on.

However, the type of the element is not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.

In one case, block-level elements are created, even if they are not explicitly defined. This happens when you add some text to the beginning of a block-level element (such as P). Even if the text is not defined as a paragraph, it is treated as a paragraph:

<p>some Text<p>some More text.</p></p>

In this case, this box is called the Nameless block box because it is not associated with a specially defined element.