CSS tutorial part5 [positioning] (Excerpted from W3C School)

ArticleDirectory

• CSS positioning)
• CSS relative positioning
• Absolute CSS positioning
• CSS float

CSS positioning (positioning) CSS positioning and floating

CSS provides some attributes for positioning and floating. With these attributes, you can create a columnar layout that overlaps one part of the layout with the other, you can also complete tasks that require multiple tables for years.

The basic idea of positioning is simple. It allows you to define the position of an element box relative to its normal location, or relative to the parent element, another element, or even the browser window itself. Obviously, this feature is very powerful and surprising. It should be noted that the support of user agents for positioning in css2 is far better than that for other aspects.

On the other hand, css1 proposed float for the first time, which is based on a feature added by Netscape in the early stages of web development. Float is not completely positioning, but it is certainly not a normal stream layout.

 

Everything is framed

Div, H1, or P elements are often called block-level elements. This means that these elements are displayed as a block box ". In contrast, elements such as span and strong are called "in-row elements" because their content is displayed in the row, that is, "In-row boxes ".

You can use the display attribute to change the type of the generated box. This means that by setting the display attribute to block, the elements in the row (such as <A> elements) can behave like block-level elements. You can also set display to none to make the generated elements have no boxes at all. In this way, the box and all its content are no longer displayed and do not occupy space in the document.

The display attribute specifies the type of the box that the element should generate.

 

However, in one case, block-level elements are created even if no explicit definition is made. This occurs when some text is added to the beginning of a block-level element (such as a div. Even if these texts are not defined as paragraphs, they are treated as paragraphs:

<Div> some text <p> some more text. </P> </div>

 

CSS positioning mechanism

CSS has three basic Positioning Mechanisms: normal stream, floating, and absolute positioning.

Unless otherwise specified, all frames are located in the normal stream. That is to say, the element position in a normal stream is determined by the element position in X (HTML.

Block-level boxes are arranged one by one from top to the next. The vertical distance between frames is calculated by the vertical margin of the boxes.

Horizontal layout of the lines in the box. You can use the horizontal padding, border, and margin to adjust their spacing. However, the vertical padding, border, and outer margin do not affect the height of the row's inner frame. A horizontal Box formed by a row is called a line box. The height of a line box is always enough to hold all the lines in it. However, setting the Row Height can increase the height of the box.

 

CSS position attribute

Static

The element box is generated normally. Block-level elements generate a rectangular box. As part of the Document Stream, one or more row boxes are created for the element in the row and placed in the parent element.

Relative 

The element box offsets a certain distance. The element remains in the shape before its position, and its original space remains.

Absolute 

The element box is completely deleted from the document stream, andRelative to its contained block location. The inclusion block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.

Fixed 

The element box is similar to setting position to absolute, but its contained block is the window itself.

Tip:Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream..

 

CSS positioning attributes

 

OverflowAttribute

This attribute defines how the content of the overflow element content area will be processed. If the value is scroll, the user agent provides a rolling mechanism whether or not required. Therefore, a scroll bar may appear even if all content can be put in the element box.

 

ClipAttribute

What happens when an image is larger than its element? The clip attribute allows you to specify the visible size of an element so that the element is trimmed and displayed in this shape.

 

Vertical-alignAttribute

This attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located. The negative length value and percentage value can be specified. This reduces the number of elements rather than increases. In table cells, this attribute sets the cell content alignment in the cell box.

 

Z-IndexAttribute

This attribute sets the position of a positioning element along the Z axis. The Z axis is defined as the axis that vertically extends to the display area. If it is a positive number, it is closer to the user. If it is a negative number, it indicates it is farther away from the user.

Z-index can only work on positioning elements (for example, position: absolute ;)!

 

Top bottom left rightAttributes (coordinate attributes, as shown in the following example)

 

CSS relative positioning

Relative positioning is a very easy-to-understand concept. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point.

If you set top to 20px, the box is 20 pixels at the top of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.

# Box_relative {position: relative; left: 30px; top: 20px ;}

As shown in:

When relative positioning is used, elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element overwrites other boxes.

 

Absolute CSS positioning

The element box set to absolute positioning is completely deleted from the document stream and located relative to its contained block. The contained block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.

# Box_relative {

Position: absolute;

Left: 30px;

Top: 20px;

}

The position of an absolutely located element is relative to the nearest located ancestor element. If the element does not have the located ancestor element, its position is relative to the initial contained block.

Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page. You can set the Z-index attribute to control the stacking order of these boxes.

 

CSS float

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box:

 

Next, when box 1 is floating to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view.

If all three boxes are moved to the left, box 1 floats to the left until the contained box is reached, and the other two boxes move to the left until the first floating box is reached.

 

As shown in, if the box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":

 

FloatAttribute

This attribute defines the direction in which the element floats. In the past, this attribute was always applied to the image, so that the text is centered around the image. However, in CSS, any element can float. A floating element generates a block-level box, regardless of its own elements.

 

Line box and cleanup

The row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box. Therefore, creating a floating box allows the text to be centered around the image:

To prevent rows from being moved around the floating box, you must applyClear attributes. The value of the clear attribute can be left, right, both, or none, which indicates which sides of the box should not be placed in the floating box.

To achieve this effectTop marginAdd enough space to bring the top edge of the element vertically down to the floating box:

ClearAttribute

This attribute defines which side of an element cannot contain floating elements. In css1 and css2, this is achieved by automatically adding the top margin to clear elements (that is, elements with the clear attribute set. In css2.1, the cleanup space is added on the top margin of the element, while the margin itself does not change. No matter which change, the final result is the same. If it is declared as clear on the left or right side, the upper and outer border borders of the element will be under the bottom margin boundary of the floating element on the edge.

 

Let's take a closer look at floating and cleaning. Suppose you want an image to float to the left of the text block and want the image and text to be included in another element with the background color and border. You may write the followingCode:

. News {

Background-color: Gray;

Border: solid 1px black;

}

. News IMG {

Float: left;

}

. News P {

Float: right;

}

<Div class = "news">

<P> some text </P>

</Div>

In this case, a problem occurs. Because the floating element is out of the Document Stream, the DIV surrounding the image and text does not occupy space.

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

Unfortunately, a new problem occurs. Because there is no existing element to be cleaned up, we can only add one empty element and clear it.

In this way, we can achieve the desired effect, but we need to add additional code. There are often elements that can apply clear, but sometimes you have to add meaningless labels for layout.

However, another method is to float the container Div:

This will achieve the expected results. 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 appropriate meaningful elements (often the footer of the site) to clear the float. This helps reduce or remove unnecessary tags.

In fact, all pages on the w3school website use this technology. If you open the CSS file, you will see that we have cleaned up the footer Div, the three divs on the footer all float to the left.