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

Today, the editor will share with you the relevant knowledge points of HTML absolute positioning, relative positioning and fixed positioning methods. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. Absolute positioning

Absolute positioning refers to fixing elements by specifying the horizontal and vertical positions of HTML elements. Elements based on absolute positioning do not occupy space.

The location declaration of absolute positioning is relative to the location and contains the closest ancestor element. If the element that currently needs to be defined does not have a located ancestor element as a reference value, it is relative to the entire web page.

Position:absolute

one

two

3 4 5 6 7 8 location and layout 9 10 11. Big {12 width: 900px absolute;23 top 13 height: 600px politics 14 background-color: black;15 position: relative;16} 17 18 .box4 {19 width: 150px absolute;23 top 20 height: 100pxscape 21 background-color: blue;22 position: absolute;23 top: 150pxscape 24 left: 200px 25} 26 27 28 29 30 31 32 33 34

The blue box is relative to the whole large box, but when there is no large box package with positioning on the outer layer of the blue box, the absolute positioning of the blue box will be relative to the entire screen.

2. Relative positioning

Position:relative

The difference between relative positioning and absolute positioning is that its reference point is not the origin of the upper left corner, but the original starting position of the element itself. And even if the element is offset to a new location, it still takes up space from the original starting point.

Positioning and layout. Big {width: 900px; height: 600px; background-color: black; position: relative;} .box1 {width: 150px; height: 100px; background-color: aqua; position: relative; left: 100px; top: 10px;} .box2 {width: 150px; height: 100px Background-color: red; / * position: relative; * / left: 130px; bottom: 50px;} .box3 {width: 150px; height: 100px; background-color: yellow; / * position: relative; * / left: 170px; bottom: 100px;} .box4 {width: 150px; height: 100px Background-color: blue; position: absolute; top: 150px; left: 200px;} .box6 {width: 150px; height: 100px; background-color: rgb (27,173,83);}

At this point, we take the third box, the yellow box, as an example, and we comment out its relative positioning, and the result is like this.

When we give him a relative location, position:relative The result of the operation is that it moves upward to the right with its original position as a reference, but when it moves, the green box below it does not move up and occupies its position, that is to say, the use of relative positioning will occupy the position, but the fixed positioning will not. Take the yellow box and the green box as an example, if the yellow box uses absolute positioning to locate him, when the Yellow River box is removed. The green box will move up to occupy the position of the previous yellow box.

3. Fixed positioning

Position:fixed

Fixed positioning will always be positioned relative to the browser window, fixed in a location in the browser, and will not scroll with the scroll bar. The most commonly used is the small ads that pop up in the computer, if you don't miss it, the small ads will always be there when you swipe the mouse to view the web page, and the navigation bar and the selection bar at the bottom of the website or APP are also commonly used.

These are all the contents of this article entitled "HTML absolute positioning, relative positioning and fixed positioning". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please 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.