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

This article introduces the knowledge about "what CSS contains blocks are". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

root element

By default, html elements are containing blocks, and some browsers set body to containing blocks.

Non-root elements fall into two categories:

1. For non-root elements without position:absolute, such as position:relative, position:static

In this case, the edge of the content area containing the block is set to the nearest block-level element, note that it is the edge of the content area, not the margin and padding edge.

2. Elements that use position:absolute absolute

In this case, the ancestor element that contains the block set at the nearest postion is not static (the ancestor element here can be a block-level element or an inline element

a. If the ancestor element is a block-level element, the containing block is set to the padding edge of the block-level element;

b. If the ancestor element is an inline element, the containing block is set to the content edge of the inline element;

Location:

Relative to is relative to the element's initial position in the CSS document flow.

Absolute is relative to the nearest located ancestor element.

Absolute positioning overrides other elements on the page, and the stacking order can be controlled by the z-index attribute.

Relative positioning in flow layout:

The flow layout is the default layout, naturally left to right, top to bottom.

If an element position:relative and coordinates are set, the element is offset from its original position.

"CSS contains what block" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.