What are the reference points and matters needing attention of HTML absolute positioning
This article introduces the relevant knowledge of "what are the reference points and matters needing attention for the absolute positioning of HTML". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
1. Absolute positioning reference point
1. Rules:
(1) by default, all absolute positioning elements, with or without ancestor elements, use body as the reference point.
.box1 {width: 300px; height: 300px; background-color: red; / * position:absolute;*/ / * left:0px;*/ / * bottom:0px;*/} .box2 {width: 200px; height: 200px; background-color: yellow; position:absolute Left:0px; bottom:0px;}
(2) if an absolute positioning element has an ancestor element, and the ancestor element is also a location flow, then the absolute positioning element will take the ancestor element of the location flow as the reference point.
.box1 {width: 300px; height: 300px; background-color: red; position:absolute; left:0px; bottom:0px;} .box2 {width: 200px; height: 200px; background-color: yellow; position:absolute; left:0px Top:0px;}
Attention: I. As long as it is the ancestor element of this absolute positioning element. ii. The location flow refers to absolute positioning / relative positioning / fixed positioning, and only static positioning is not allowed in the positioning flow.
(3) if an absolute positioning element has an ancestor element, and the ancestor element is also a location flow, and multiple elements in the ancestor element are location flow, then the absolute positioning element will take the nearest ancestor element as the reference point.
. The above code remains the same. .box3 {width: 100px; height: 100px; background-color: black; position:absolute; right:0px; bottom:0px;}. Omit the code.
Second, the attention points of absolute positioning
(1) if an absolute positioning element takes body as the reference point, then it actually takes the width and height of the first screen of the web page as the reference point, rather than the width and height of the entire web page as the reference point.
D152_LimeLightOfAbsolutePosition .box1 {width: 100px; height: 100px; background-color: red; position:absolute; bottom:0px; right:0px;?} .box2 {width: 2000px; height: 100px; background-color: blue Position:} .box3 {width: 200px; height: 2000px; background-color: black;?}
(2) an absolutely positioned element ignores the padding attribute of the ancestor element.
.box4 {height: 300px; width: 300px; background-color: yellow; padding:50px; / * position:absolute;*/ / * boder:20px black; * /} .box5 {height: 100px; width: 100px; background-color: red; position:absolute Left:0px; top:0px;} "what are the reference points and matters needing attention for absolute positioning of HTML"? thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
