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

This article mainly introduces "HTML how to achieve the movement of div elements relative to the browser window". In daily operation, I believe many people have doubts about how to achieve the movement of div elements relative to the browser window in HTML. Xiaobian consulted all kinds of materials and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the question of "how to realize the movement of div elements relative to the browser window by HTML". Next, please follow the editor to study!

If you want to set absolute positioning in the layer model for an element, you need to set position:absolute (for absolute positioning), which drags the element out of the document flow, and then uses the left, right, top, and bottom attributes to position absolutely relative to its nearest parent inclusion block with positioning attributes. If such an inclusion block does not exist, it is relative to the body element, that is, to the browser window.

The following code enables the div element to move 100px to the right and 50px down relative to the browser window.

Div {

Width:200px

Height:200px

Border:2px red solid

Position:absolute

Left:100px

Top:50px

}

The effect is as follows:

HTML+CSS basic course

If you want to set the relative positioning in the layer model for an element, you need to set position:relative (for relative positioning), which determines the offset position of the element in the normal document flow through the left, right, top, and bottom attributes. The process of relative positioning is to first generate an element according to static (float) (and the element floats like a layer), and then moves relative to the previous position, the direction and amplitude of movement are determined by the left, right, top, bottom attributes, and the position before offset remains unchanged.

The following code implements moving 50px down relative to the previous location and 100px to the right

# div1 {

Width:200px

Height:200px

Border:2px red solid

Position:relative

Left:100px

Top:50px

}

Effect picture:

What is meant by "the position before the offset remains unchanged"?

You can do an experiment by adding a span tag after the 19 lines of div tag in the code editor on the right, and write some text in the span tag. The code is as follows:

The pre-offset position remains unchanged and can not cover the pre-offset position of the front div.

Effect picture:

It is obvious from the effect diagram that although the div element is offset from the previous position, the previous position of the div element is retained, so the later span element is displayed after the previous position of the div element.

Fixed: stands for fixed positioning, similar to the absolute positioning type, but its relative moving coordinates are the view itself (the web page window on the screen). Because the view itself is fixed, it will not change with the scroll bar of the browser window, unless you move the screen position of the browser window in the screen, or change the display size of the browser window, so the fixed positioning element will always be located somewhere in the view within the browser window and will not be affected by document flow, which is the same function as the background-attachment:fixed orientation property. The following code enables you to move 100px to the right and 50px down relative to the browser view. And the position is fixed when you drag the scroll bar.

# div1 {

Width:200px

Height:200px

Border:2px red solid

Position:fixed

Left:100px

Top:50px

}

Text.

....

After using position:absolute to realize the positioning of the set element relative to the browser (body) setting, have you ever wondered whether it can be positioned relative to other elements? The answer is yes, of course. Use position:relative to help, but you must follow the following specifications:

1. The reference positioning element must be the predecessor of the relative positioning element:

Position relative to the reference element

From the above code, you can see that box1 is the parent element of box2 (the parent element is, of course, the predecessor element).

2. Elements located by reference must be added to position:relative.

# box1 {

Width:200px

Height:200px

Position:relative

}

3. If the positioning element is added to position:absolute, you can use top, bottom, left, and right for offset positioning.

# box2 {

Position:absolute

Top:20px

Left:30px

}

This allows the box2 to be positioned relative to the parent element box1 (note here that the reference can be set freely instead of a browser).

At this point, the study on "how HTML makes div elements move relative to the browser window" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.