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

This article is a small series for everyone to introduce in detail "what are the position positioning methods in CSS", the content is detailed, the steps are clear, and the details are properly handled. I hope this article "what are the position positioning methods in CSS" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small series.

In CSS, we are positioned through the positioning attribute position, which has the following attribute values. Common attributes include the following:

value describes

absolute generates an element that is absolutely positioned relative to the first parent element other than static positioning. The position of an element is specified by the "left, ""top, ""right," and "bottom" attributes.

fixed Generates elements that are absolutely positioned, positioned relative to the browser window. The position of an element is specified by the "left, ""top, ""right," and "bottom" attributes.

relative Generates relatively positioned elements, positioned relative to their normal positions. Therefore,"left:20" adds 20 pixels to the LEFT position of the element.

static default. Without positioning, elements appear in normal flow (ignoring top, bottom, left, right, or z-index declarations).

inherit Specifies that the value of the position attribute should be inherited from the parent element.

First of all, we're using the standard box model here, so you have to think of it as a box or a box. Let's start with the first default parameter static.

static: static positioning is the default value of position, the element box is generated normally, that is, the normal display when there is no positioning.

absolute: absolute positioning

Elements are removed from the document flow and positioned relative to the containing block. Element closed in original space. Element positioning generates a block-level box, whether it was originally an inline element or a block-level element.

The containing block here refers to the ancestor element (block-level or in-line) whose most recent position value is not static, and generally specifies an element as the containing block of the absolutely positioned element, with its position set to relative and no offset.

fixed: fixed position

Elements fall out of the text flow, are removed from plain text, and are positioned relative to the browser window so they don't move as the document scrolls. Element closed in original space. Element positioning generates a block-level box, whether it was originally an inline element or a block-level element. The only difference from absolute positioning is the inclusion of blocks.

Contains blocks: browser windows.

relative: relative positioning

Relative positioning, the most common use of the two ways are as follows:

Method 1: The element is offset from its original position by a certain distance, but the original space is still retained and appears blank.

Use method 2: Set an element to position: relative; to make the child elements of the element absolutely positioned relative to the element.

Absolute/fixed vs float

What's the same: elements are removed from the text flow, but still affect the layout; a block-level box is generated, whether or not they were originally block-level elements.

Difference: The containing block of a float is the closest block-level ancestor element.

Set offset attribute: top/right/bottom/left, initial value is auto.

After position is used, the offset attribute must be used to define the offset, that is, the offset relative to the containing block. Note that the element defining the offset should be an element whose position value is not static.

Width and heigth are sometimes required, but they may conflict with the definition of the offset attribute, since the four offset attributes actually define the size of the element. In this case, the left and right are defined according to the width and left attributes, and the upper and lower are defined according to the top and height attributes.

Another property in CSS. Then there is overflow.

Usually the content overflow attribute has several values:

overflow: visible/ hidden/ scroll /auto/ inherit

The initial overflow value is visible.

Overflow is what we often use in: If an element has a fixed size, but its content cannot fit, it will lead to overflow. overflow controls visible, hidden, and scroll visibility of the overflow portion.

element visibility: visible/ hidden/ collapse/ inherit, initial value is visible.

Read here, this article "CSS position positioning methods have what" article has been introduced, want to master the knowledge of this article also need to practice before you can understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

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.