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

This article introduces you how to analyze DIV absolute positioning and relative positioning, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Do you know the concepts of absolute positioning and relative positioning in DIV? here, absolute positioning enables you to accurately locate the independent location of elements on the page, regardless of the positioning settings of other elements of the page. Relative positioning means that the location of the element you locate is relative to the location assigned in the file.

Introduction to DIV

DIV is also called integral division in programming, that is, integers that can only be quotient. DIV elements are elements that provide structure and background for block-level content in an HTML document. Everything between the start and end tags of the DIV is used to form this block, and the properties of the elements contained in it are controlled by the attributes of the DIV tag, or by formatting the block using a style sheet.

Use DIV tags

When we use CSS-P, we mainly use it on DIV (division) tag. When you put text, images, or others in DIV, it can be called "DIVblock", or "DIVelement" or "CSS-layer", or simply "layer". In Chinese, we call it "hierarchy". So when you see these nouns later, you will know that they refer to a HTML in DIV.

The method of using DIV is the same as that of other tag: ThisisaDIVtag.

If you use DIV alone without any CSS-P, it will have the same effect on a web page as it does in a web page.

But when we use CSS-P in DIV, we can strictly set its location. First we need to give the DIV that can be controlled by CSS-P an ID or its name. For example, we give the following DIV the name truck. The purpose of giving a name is that we can use JavaScript to control it later, such as moving it or changing some of its properties, and so on.

DIV absolute positioning and relative positioning

◆ DIV absolute Positioning:

The location attribute will be the key for netizens to open the door of happiness: H4 {position:absolute;left:100px;top:43px}

This CSS rule allows the browser to set the starting position exactly 100 pixels to the left of the browser and 43 pixels from its top. Note that the left and top are set here, that is, the text will be loaded into the browsing window from left to right and from top to bottom.

The left and top attributes are intuitive, the left (left) sets the distance of the feature from the left of the browser window, and the top (top) sets the distance from the top of the browser window. When setting these distances, you can use the various degree units or scale values you have learned. When using a scale value, the scale value is the size relative to the parent feature.

What can you locate? Anything! Paragraphs, words, GIF and JPEG images, QUICKTIME movies, and so on.

◆ DIV relative positioning:

Absolute positioning allows you to accurately locate the independent location of elements on the page, regardless of the positioning settings of other elements of the page. Relative positioning means that the location of the element you locate is relative to the location assigned in the file. Example:

I {position:relative;left:40px;top:10px}

The key to relative positioning is that the position of the positioned element is relative to its usual position. The relative positioning unit appears between the lines of the ordinary static positioning unit, and the positioning does not completely separate itself from the static positioning unit. If you stop using relative positioning, the display position of the text will return to normal. Be careful when using relative positioning, otherwise it is easy to make the page very messy.

In addition to relative and absolute positioning, you can also use static parameter values. Static is the default value for the position feature. Its use method is the same as the positioning method in ordinary HTML, and no special positioning settings can be attached. That is to say, except for the margin property, or by using the float property to float the unit, it can affect the positioning of the unit.

On how to analyze DIV absolute positioning and relative positioning to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.