Home >Web Front-end >HTML Tutorial >CSS positioning position_html/css_WEB-ITnose
CSS positioning position_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:55923browse
In front-end web page layout, when laying out on the same plane, we mostly use the float attribute to locate the position of web page elements. However, when it comes to pop-up layers, floating layers, page advertising plug-ins, etc., they all require the position attribute in CSS for positioning. For beginners, it is often unclear whether the absolute value, relative value, fixed value, etc. of the position attribute should be used. Wait, let's give a brief introduction to the basic usage of these three values of the position attribute, hoping to be helpful to beginners.
1. Absolute positioning of position
Here we divide the absolute positioning of position into two categories:
A: Give The element defines position:absolute, and its parent frame does not define any position attribute. The absolute positioning at this time is positioned relative to the edge of the page. The position will be calculated based on the 0 point in the upper left corner of the browser. Absolute positioning makes the element irrelevant to the document flow, so it does not occupy space. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Its position is not affected by the parent frame and is only calculated from the edges of the page. The code is as follows:
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>
The effect is as follows:
B: Give the element Position:absolute is defined, and its parent frame defines the position:absoluteposition:relativeposition:fixed attribute. The absolute positioning at this time is positioned relative to the very edge of the parent frame. Absolute positioning makes the element independent of the document flow, so it does not occupy space. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Its position only changes within the parent frame. The code is as follows:
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</style></head><body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>
The effect is as follows
Therefore, if the positioning of the page element is to be defined within the parent element without being restricted by the display resolution, browser window size, etc., it is recommended to use option B.
2. Relative positioning of position
If you position an element relatively, first it will appear at its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, with relative positioning, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes).
relative is indeed positioned relative to itself. The parent DIV sets position:relative without giving a value. It has no effect on its own
but it serves as a reference for its child elements
3. Fixed position Fixed always uses the body as the object when positioning, and always positions elements according to the browser window, through "left", "top", "right" , "bottom" attribute for positioning.
There seems to be a lot more about the usage of position. The editor’s language organization skills are not very good. Let’s summarize the usage:
When you need to make a drop-down secondary menu effect When doing this, you need position:relative for the parent element, and position:absolute for the drop-down element inside.
When you need to make a floating advertisement on the page, or a button to return to the top of the page, you need position:fixed.
Usually we use position:absolute; position:relative for absolute positioning layout, define positioning through CSS, and DIV layout HTML. Pay attention to where position:relative is used and where position: is used. Position with absolute, and don’t forget to use left, right, top, and bottom to position the specific position. Absolute positioning If the parent does not use position:relative, but directly uses position:absolute absolute positioning, then the body tag will be used as the parent, and the object defined using position:absolute will be dragged out no matter how many layers of the DIV structure it is located in. Perform absolute positioning with 6c04bd5ca3fcae76e30b72ad730ca86d as the parent (reference level). Absolute positioning is very easy to use, but be sure not to abuse it and use it everywhere. This will sometimes make you too lazy to calculate the distance between the top, bottom, left and right, and may cause the CSS code to be bloated. It is more practical to use it appropriately and use it where it is used.
We can use css z-index to define the overlapping order of css layers during absolute positioning.
At the same time, for the values of left, right, bottom, and top, you can use the (Photoshop) PS slicing tool to obtain accurate values.
Finally, the editor would like to remind you that if you use the position:absolute attribute to position the child DIV in your parent DIV, and the parent DIV does not make any definitions (in the parent DIV Already filled and occupied by other elements), and you want the sub-DIV definition to work. At this time, you can not define the sub-DIV with left, top, right, and bottom. You can use margin-top and margin-left to define it, but this The method is different under ie6/7 than under ie8/9/10/11, Firefox, and Google. For ie6/7, you need to use css Hack. The code is as follows:
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><img src="1.jpg" width="600" height="600" /><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>
The effect is as shown below
使用CSS Hack之后 代码：
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><img src="1.jpg" width="600" height="600" /><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>
在各个版本的浏览器下的 效果如下
此种方法最好不要使用 在不同版本浏览器下需要来回的用CSS Hack调整！