Easily achieve graceful site layout with CSS layout positioning properties

This article introduces CSS layout positioning properties, skilled use can easily achieve beautiful site layout, interested friends can refer to, I hope to help you

CSS Positioning properties:





Bottom, left, right, and top





position





Clip





float





Clear





Overflow





Z-index





This class property sets the position of the element in the parent element. When you set this type of element, if you set the length value in PX as the unit, the string with the unit is returned when you read the property through the Style object.





1. Edge offset (bottom,left,right and top)





function: Sets the distance of the element from the bottom, left, right, and top edge of the reference element.





Value: Property value can be numeric or percent. The number represents the distance from the reference element, in pixels px, as a percentage of the width of the parent element. The default value is 0.





Top: Defines the distance of an element from the upper edge of its parent element.





2. Positioning mode (position)





function: Determines how elements are positioned in the document.





value: The desirable values include absolute,relative and static.





Absolute represents the absolute positioning method. When an element a is an absolute positioning method, the child elements under a are positioned as the coordinate origin with the top left corner of a. And for element A, the browser will look for an element a-p in the child node tree to which the element a belongs, using the absolute positioning method or the relative positioning method to determine the position of element A in the upper-left corner of the a-p as the reference point, or, if not found, the top-left corner of the document.





relative means that the element is positioned relative to the position of its adjacent non absolutely positioned elements. When the position property of element A is set to relative, the child elements under a are positioned as references in the upper-left corner of a. For the position of a, the browser will look for elements that are closest to element a (and not necessarily in its child node tree) position attributes that are not absolute or relative, with the element as a reference to determine the position of the current element A and, if not found, the top left corner of the document as the reference point. When relative positioning, the left property of a element refers to the distance relative to the left-hand side of the reference element, and the top refers to the distance relative to the bottom of the reference element.





Static is the default, where the position of the element in the document is naturally arranged by the page according to the order of the elements, at which point the element's positional parameters, such as left and top, are invalid.




The
fixed element will be independent of the page element, but its position is relative to the screen itself, not to the document itself.





3.clip





function: Set a rectangular viewable area for the layer, the page only displays the content in the viewable area, the content outside the viewable area is transparent, the effect is equivalent to remove the part beyond the visible area. This property can be used only when the position value is set to absolute.





Value: The property value can be either auto (auto) or rect (numeric). Where the value is a group of 4 with unit values, each value is separated by a space. 4 values, in turn, represent the distance from the top, right, bottom, and left edge of the visible region to the upper-left corner of the visual region, the distance from the top edge of the viewable area, the top edge of the layer element, the distance to the right of the viewable region, and the left edge of the





4.float

Action: Sets the element to float around adjacent elements, such as text wrapping around the image that floats.





values: The desirable values include left,right and none,left that float the element to the left of the other element; Right means floating on the right-hand side; None is the default value. This property you can refer to the Www.i5768.com site, its home page using a lot of float properties, as shown in the following figure, I have its layout of the Div block with the Red line, its floating way is very clear, including floating around and nested floating way.


 


5.clear





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





values: The desirable values include}eft (which means that there are no floating elements on the left), right (which means that there are no floating elements allowed on the right-hand side), both (which means that there are no floating elements on either side), none (which means that floating elements are allowed on both sides). The default value is None,





This property can be used with the float property to determine the position relationship between elements, and when the float property is applied to the element to be floated, the clear attribute is applied to the wrapped element, causing a variety of floating and surround relationships between the two. When the clear property conflicts with the Float property, the clear property is the subject. For example, to set the IMG element float property to left, and to set the P element clear property to}eft and not allow to float on the left-hand side, the IMG element does not float on the left side of the P element.





because the Clear property defaults to none, which means that other elements are allowed to float on the left and right sides, you can set only the float property if you just want the setting element to float next to other elements.





6.overflow





function: This property determines how the element content is processed when its size exceeds the specified value.





value: The desirable value includes Visible,hidden,scroll and auto,visible that the element is automatically enlarged to show all element content. Hidden says not to expand, but to hide the excess part. Scroll indicates that the scroll bar is displayed and the element section is unchanged. Auto representations are processed automatically by the browser.





7. (cascade mode) Z-index





function: Set the hierarchy order and coverage relationship between multiple elements, determine the order of each element in the direction of the vertical document, that is, the order of each layer. This property must be valid when the Position property is absolute.





By default, the elements in an HTML document are arranged in the document in the order in which they appear in the document, and they are located on the same plane. When you set an element's Z-index property, you can make one element on top of another, combining the position attribute and the Left,top position attribute to enable multiple elements to be filled.





Value: The property value can be either auto or no unit integer value. Auto determines the hierarchical relationships of each layer according to the sequence defined by each layer, and the layer defined below overrides the previously defined layer; The integer value specifies a numeric value for each layer, and the larger the value, the higher the layer is.





above these attributes are commonly used in the site structure layout of the most important attributes, understand later will be convenient for everyone to interpret the code, to facilitate their own modification, adjustment, to achieve their ideal layout effect!