The common techniques that must be delved into in CSS positioning

Source: Internet
Author: User

<span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " ></span><span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " > About CSS positioning, some people are often used casually, in line with their own requirements. But there are a lot of position and other properties in CSS that need to be carefully refined. </span>

1.position:static

The static property is the default value of position, which means that when an element does not have a position property set for it, its default value is static.

2.position:absolute

This is a position property value that will often be used. If absolute is set for an element, the element is detached from the original document flow. Some of the images say, for example, that a element is defined as Position:absolute, then this element does not have a position on the other elements of the page, but rather overrides the floating state above the entire page. The location of other elements in the page, changes in size, etc., does not affect the position of a element, which is equivalent to an outsider.

3.position:relative

Relative is the most useful method of defining. Sets the relative property to indicate that the element has changed relative to its original position. For example, we define a B element and set it to the following CSS style:

#b {    position:relative;    width:100px;    height:100px;    top:100px;}
The section code defines the B element, which is positioned at a distance of 100px relative to the position where the position attribute is not defined. The Relative property value is defined as this positioning mode.

4.position:fixed

Fixed positioning is not much, but it is very suitable for fixed-mode parts, such as the top menu. When the fixed property is defined, the position of the element does not change with any behavior.

5.relative+position

Using these two positions simultaneously is a very common technique, and a novice may encounter a lot of trouble here. In general, if an element is absolutely positioned, its reference is to set relative positioning from its nearest element, if there is a setting that will be positioned near its nearest element, and if there is no relative positioning element for its ancestor, the HTML will be found. For example, the following code uses a combination of both to achieve a two-column layout;

<span style= "White-space:pre" ></span> #div-1 {             position:relative;            }            #div -1a {             position:absolute;             top:0;             right:0;             width:200px;            }            #div -1b {             position:absolute;             top:0;             left:0;             width:200px;            }
The inner two sub-div is absolutely positioned for reference based on elements whose outer position is relative.

6.clear:both Clear Float

Sometimes the position collapses, that is, the child element is in the parent element, but the parent element's size does not "open up" with the child element's size, resulting in the collapse effect of the parent element. This bug occurs because the child element sets the float property, which causes the parent element to collapse. To resolve this bug, you need to set the clear float for the parent element. The sample code is as follows:

<span style= "White-space:pre" ></span>    #div -1a {             float:left;             width:190px;            }            #div -1b {             float:left;             width:190px;            }            #div -1c {             clear:both;            }



The common techniques that must be delved into in CSS positioning

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.