CSS positioning position

<p>In front-end web page layout, when laying out on the same plane, we mostly use the float attribute to position 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. </p> <p> </p> <p>1. Absolute positioning (absolute positioning) </p> <p> Here we can divide the absolute positioning of position into two categories: </p> <p> A: Position:absolute is defined for the element, 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: </p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_894477" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number15 index14 alt2"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number16 index15 alt1"><code class="html plain">left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>　　</p> <p>效果如下图：</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211422081994574.gif" class="lazy" alt=""></p> <p> </p> <p>B：给元素定义了position:absolute，其父框架定义了position:absolute\position:relative\position:fixed属性。此时的绝对定位就是相对于父框架最边缘最边缘来进行定位的，绝对定位使元素与文档流无关，因此不占据空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。其位置只在父框架内做变化，代码如下：</p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_777664" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number15 index14 alt2"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number16 index15 alt1"><code class="html plain">left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>　</p> <p>The effect is as shown below</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211430059025833.gif" class="lazy" alt=""></p> <p> </p> <p>So, if you want to define the positioning of page elements within the parent element without being restricted by monitor resolution, browser window size, etc., it is recommended to use option B. </p> <p> </p> <p>2. Relative positioning (relative positioning) </p> <p> 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). </p> <p> Relative is indeed positioned relative to itself. The parent DIV sets position: relative without giving a value. It has no effect on its own <br> but it serves as a reference for its child elements </p> <p> </p> <p>3. Position fixed Fixed always uses the body as the object when positioning, and always positions the element according to the browser window, through the "left", "top", "right", and "bottom" attributes. position. </p> <p> </p> <p>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: </p> <p>When you need to create a drop-down secondary menu effect, you need position:relative for the parent element, and position:absolute for the drop-down element inside. </p> <p>When you need to make a floating advertisement on the page, or make a button to return to the top of the page, you need position:fixed. </p> <p> </p> <p>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:absolute is used for positioning. Don’t forget to use left ,right,top,bottom cooperate to locate 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 <body> 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. <br>We can use css z-index to define the overlapping order of css layers during absolute positioning. <br>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. </p> <p> </p> <p>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 has not been defined in any way (the parent DIV has been filled and occupied by other elements), what else can you do? If you want the sub-DIV definition to work, you don't need to define the sub-DIV with left, top, right, and bottom. You can use margin-top and margin-left to define the sub-DIV. However, this method cannot be used under ie6/7 and ie8/ 9/10/11, Firefox and Google have different locations. For ie6/7 you need to use css Hack, the code is as follows: </p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_228223" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> <div class="line number23 index22 alt2">23</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">img</code> <code class="html plain">src="1.jpg" width="600" height="600" /></code></div> <div class="line number15 index14 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number16 index15 alt1"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">margin-left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain">margin-top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number23 index22 alt2"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>　</p> <p>The effect is as shown below</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211508339809201.jpg" class="lazy" alt=""></p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211509133554672.jpg" class="lazy" alt=""></p> <p>After using CSS Hack Code: </p> <div class="cnblogs_Highlighter sh-gutter"> <div> <div id="highlighter_306366" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> <div class="line number11 index10 alt2">11</div> <div class="line number12 index11 alt1">12</div> <div class="line number13 index12 alt2">13</div> <div class="line number14 index13 alt1">14</div> <div class="line number15 index14 alt2">15</div> <div class="line number16 index15 alt1">16</div> <div class="line number17 index16 alt2">17</div> <div class="line number18 index17 alt1">18</div> <div class="line number19 index18 alt2">19</div> <div class="line number20 index19 alt1">20</div> <div class="line number21 index20 alt2">21</div> <div class="line number22 index21 alt1">22</div> <div class="line number23 index22 alt2">23</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">span</code> <code class="html plain">style="color: #008000;"><!</code><code class="html keyword">doctype</code> <code class="html plain">html></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="utf-8"></code></div> <div class="line number5 index4 alt2"><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>position</</code><code class="html keyword">title</code><code class="html plain">></code></div> <div class="line number6 index5 alt1"><code class="html plain"><</code><code class="html keyword">style</code> <code class="html plain">type="text/css"></code></div> <div class="line number7 index6 alt2"><code class="html plain">.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;}</code></div> <div class="line number8 index7 alt1"><code class="html plain">.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</code></div> <div class="line number9 index8 alt2"><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></div> <div class="line number11 index10 alt2"> </div> <div class="line number12 index11 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number13 index12 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="all"></code></div> <div class="line number14 index13 alt1"><code class="html plain"><</code><code class="html keyword">img</code> <code class="html plain">src="1.jpg" width="600" height="600" /></code></div> <div class="line number15 index14 alt2"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html plain">class="demo"></code></div> <div class="line number16 index15 alt1"><code class="html plain">position:absolute;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number17 index16 alt2"><code class="html plain">margin-left:100px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number18 index17 alt1"><code class="html plain">margin-top:200px;<</code><code class="html keyword">br</code> <code class="html plain">/></code></div> <div class="line number19 index18 alt2"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">div</code><code class="html plain">></code></div> <div class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></div> <div class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></div> <div class="line number23 index22 alt2"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <p>The effect under various versions of browsers is as follows</p> <p><img src="/static/imghw/default1.png" data-src="http://images.cnitblog.com/blog/637461/201410/211511280741216.jpg" class="lazy" alt=""></p> <p>It is best not to use this method. You need to use CSS Hack to adjust it back and forth under different versions of browsers! </p> <div id="MySignature"></div> <div class="clear"></div>