Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the skills of Css absolute positioning", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "what are the skills of Css absolute positioning"!

1. The son must be the father

In most cases, the absolute positioning of child elements is relative to the parent element positioning, although the parent element position can be set relative, absolute, fixed, but if you do not want the parent element off-label, common solutions are:

parent element setting position: relative;(make parent element position element without deviating from standard flow);

child element setting position: absolute;;

2. Formula Application of Absolute Positioning Element

Absolute positioned element: An element whose position value is absolute or fixed, because absolute is positioned with reference to the viewport when no ancestor positioned element is found, just like fixed.

For absolutely positioned elements, the following two formulas are satisfied:

Width of positioning reference object = left + right + margin-left + margin-right + actual occupied width of absolute positioning element;

Height of positioning reference object = top + bottom + margin-top + margin-bottom + actual height occupied by absolute positioning element;

If you want the absolute anchor element to be the same width and height as the anchor reference object, you can set the following attributes for the absolute anchor element, which is why the anchor can achieve horizontal and vertical centering of the box.

Left, right, top, bottom are all set to 0, margin is set to auto;

According to the above formula, margin + absolute positioning element actually occupies width and height = width and height of positioning reference object, and the box is naturally displayed horizontally and vertically in the center.

At this point, I believe that everyone has a deeper understanding of "Css absolute positioning skills," may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.