Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to set css positioning". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to set css positioning.

Positioning 1.position

Default value for static:positon positioning, no positioning

Invalid settings for top and left

Relative: an element that generates relative positioning and is positioned relative to its normal position. Generally, when setting absoute positioning for child elements, the position of the relative element for the parent element is controlled by top, right, bottom and left. The positioning starting point of the value is the upper-left corner of the parent element (which is different from absoute and fixed).

In the above image, we add a relative positioning of each 100px to the left up to the father block element. The parent element of father is body, so father is offset from body. After adding relative positioning, son block element is a child element under father. If father does not add positioning, then son is offset relative to body. In fact, father in the above image has positioning, so son is offset relative to father, not relative to bady. Summary: the relative positioning is offset relative to the upper-left corner of the parent element. If there is no parent element, look up layer by layer.

Absolute generates an absolutely positioned element, which is positioned relative to the first parent element other than static positioning. The position of the element is controlled by top, right, bottom, and left.

First of all, absolute is positioned relative to the first parent element other than static positioning, that is, relative to the set positioning attribute, but does not contain the parent element whose positioning attribute is static, as long as the parent element is set to relative or absolute and so on. Secondly, top and left are positioned relative to the upper left corner of the parent element, and right and bottom are positioned relative to the lower right corner of the parent element.

Fixed generates absolute positioning elements, which are positioned relative to the browser window. The difference from absoute is that fixed does not follow the screen scrolling (common various screen ads). The position of the elements is controlled by top, right, bottom, and left.

Through the figure above, we add a relative positioning to the parent element of son, but when we add fixed to the child element, we find that the son element is positioned relative to the browser window, and the parent element has no restriction on it.

Sticky: it's like a combination of position:relative and position:fixed:

To put it simply, the characteristic he embodies when the page is not scrolling is relative, but when the page is scrolling, it is the characteristic of fixed.

2.z-index

Defines the cascading order of elements in a document, which applies to elements that define position

When multiple layers of positioning are stacked together, you can define what elements are at the top through the definition of z-index attributes. For example, some pop-up windows show that you need to have a mask layer on the content of the pop-up window. In this case, you need to position the mask layer on top of the content to cover it. When you position the content of the pop-up window on the mask layer, you need z-index to locate what elements are displayed on it. The pop-up window above the mask can be realized by setting the z-inde value of the pop-up window to be greater than the z-index value of the mask.

3.clip: defines which part of the element is visible. The part outside the area is transparent and is suitable for absolute positioning elements.

A value of auto means that the object has no clipping. For example, for an element with a width and height of 100px, both clip: rect (auto auto auto auto) and clip: rect (0px 100px 100px 0px) indicate that the element will not be clipped. The first value indicates that the element will not be clipped from top to bottom. If 0 is clipped from above to 0px, it will not be clipped. The second value means clipping from the right to the set value. 100 means clipping from the right to the position of the width 100px, so there is no clipping effect.

Thank you for your reading, the above is the content of "how to set css positioning". After the study of this article, I believe you have a deeper understanding of how to set css positioning, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.