CSS learning (iii) Positioning

Source: Internet
Author: User

The positioning attribute allows you to locate elements.

1. 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. We will clarify the floating meaning in the subsequent chapters.

Everything is framed

Div, H1, or P elements are often called block-level elements. This means that these elements are displayedContentBlock 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.

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>

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

The text lines of block-level elements are similar. Suppose there is a paragraph that contains three lines of text. Each line of text forms an unknown box. You cannot apply a style directly to an untitled block or line box because there is no place to apply the style (note that the line box and the line box are two concepts ). However, this helps you understand that everything you see on the screen forms a certain frame.

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. The horizontal Box formed by a row is calledLine box)The height of the line box is always enough to accommodate all the lines it contains. However, setting the Row Height can increase the height of the box.

In the following sections, we will explain relative positioning, absolute positioning, and floating in detail.

CSS position attribute

By using the position attribute, we can select different types of positioning in 4, which affects the way element boxes are generated.

Meaning of the position property value:

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 and located relative to its contained block. 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 part of the normal stream positioning model, because the element position is relative to its position in the normal stream.

2. Relative CSS positioning

The element box that is set to relative positioning will offset a certain distance. The element remains in the shape before its position, and its original space remains.

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:

Note that when relative positioning is used, elements still occupy the original space, regardless of whether or not they are moved. Therefore, moving an element overwrites other boxes.

CSS relative positioning instance
Positioning: relative positioning
This example shows how to locate an element relative to its normal location.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.