Master several CSS positioning attributes to easily achieve beautiful site layout

Novice grass-roots webmasters often use ready-made templates for their websites. Therefore, they also have great limitations. They cannot express the layout effects they have imagined and have the originality of templates. To achieve a beautiful site layout, you still need to master several CSS positioning attributes.

CSS positioning attributes:

◆ Bottom, left, right, and top

◆ Position

◆ Clip

◆ Float

◆ Clear

◆ Overflow

◆ Z-index

This attribute sets the position of an element in the parent element. When this type of element is set, if the length value is set to px, the Unit string is returned when the attribute is read through the style object.

1. bottom, left, right, and top

Purpose: set the distance between an element and the base side, left side, right side, and top side of the reference element.

Value: the property value can be a value or percentage. A value indicates the distance between the reference element and the reference element. The unit is pixel px. The percentage indicates the percentage of the width of the reference parent element. The default value is 0.

　2. position

Purpose: Determine the Positioning Method of elements in the document.

Valid values: absolute, relative, and static.

Absolute indicates the absolute positioning method. When element A adopts absolute positioning, the child element of Element A is located with the vertex in the upper left corner of A as the coordinate origin. For element A, the browser looks for an element A-P in the subnode tree to which element A belongs, which adopts the absolute or relative positioning method, use the top-left vertex of the A-P as the reference point to determine the position of Element A. If not, use the top-left vertex of the document as the reference point.

Relative is used to locate the position of an element relative to its adjacent non-absolute positioning element. When the position attribute of Element A is set to relative, the child element of A is located based on the vertex position in the upper left corner of. For the location of A, the browser will look for the previous position closest to element A (not necessarily in its subnode tree). The position attribute is not an element of absolute or relative, use this element as the reference to determine the position of the current element A. If it cannot be found, use the vertex in the upper left corner of the document as the reference point. In relative positioning, the left attribute of element A refers to the distance to the left of the reference element, while the top attribute refers to the distance to the bottom edge of the reference element.

The static mode is the default mode, indicating that the positions of elements in the document are arranged by the webpage according to the order of each element. At this time, the parameters of each element location, such as left and top, are invalid.

3. clip

Purpose: Set a rectangle visible area for the layer. Only the content located in the visible area is displayed on the page. The content outside the visible area is transparent, and the effect is equivalent to removing parts outside the visible area. This attribute can be used normally only when the position value is set to absolute.

Value: the property value can be auto or rect ). The values are a group of four numeric values with units separated by spaces. The four values represent the distance between the top edge, the right side, the bottom side, and the left side of the upper left corner of the visible area, that is, the distance between the top edge of the visible area and the top edge of the base margin layer element, the distance from the right and left of the visible area to the left of the layer element.

4. float

Purpose: set the elements to float around adjacent elements, such as text around an image to produce text wrapping effect.

Value: Optional values include left, right, and none. left indicates that the element is moved to the left of other elements, right indicates that the element is floated to the right, and none indicates that the element is not floated. None is the default value. For details about this attribute, refer to www.i5768.com. Its homepage uses many float attributes, as shown in. As shown in, I have checked out the div block in its layout with a red line, and its floating method is clear, it includes the Left and Right floating modes and nested floating modes.

　　

 

5. clear

Purpose: Set whether other elements are not allowed to float on the left, right, or both sides of the element.

Value Options: eft (float element on the left is not allowed), right (float element on the right is not allowed), and both (float element on both sides is not allowed) and none (both sides are allowed to have floating elements ). The default value is none,

This attribute can be used with the float attribute to determine the positional relationship between elements. When the float attribute is applied to the element to be floating, the clear attribute is applied to the surrounded element, to generate various floating and surrounded relationships between the two. When the clear attribute conflicts with the float attribute, the clear attribute prevails. For example, if you set the float attribute of the img element to left and the clear attribute of the p element to} eft, the img element does not float on the left side of the p element.

Because the default value of the clear attribute is none, it indicates that other elements can be floating on both sides of the left and right. If you only want to set the elements to floating next to other elements, you can only set the float attribute.

6. overflow

Purpose: when the content size of an element exceeds the specified value, this attribute determines how to process it.

Value Options: visible, hidden, scroll, and auto. visible indicates that the element is automatically expanded to display all the element content. Hidden indicates that the excess part is hidden without expansion. Scroll indicates that the scroll bar is displayed, while the element section does not change. Auto indicates that the browser automatically handles the request.

　7. z-index

Purpose: set the hierarchical order and overwrite relationship between multiple elements to determine the hierarchical order of each element perpendicular to the document, that is, the ascending order of each layer. This attribute must be valid when the position attribute is absolute.

By default, elements in an HTML document are arranged in the document in order of appearance in the document. They are located on the same plane. After setting the z-index attribute of an element, you can place an element on another element and combine the position attribute and left, top, and other location attributes to reproduce multiple elements.

Value: the property value can be auto or an integer without unit. Auto determines the hierarchy of each layer based on the sequence defined by each layer. The layer defined later will overwrite the layer defined earlier. The integer value specifies a value for each layer, the larger the value, the higher the layer is.

All the attributes mentioned above are the most important attributes commonly used in website structure layout. After learning about these attributes, you can easily interpret the code and modify and adjust the code to achieve your desired layout! This article was first launched by the webmaster www.i5768.com. Please indicate the copyright for reprinting!