I know you don't know the negative margin

Today, the application of negative margin technology is more and more extensive, any large site under the glimpse will have its shadow. I think the negative margin technology is one of the indispensable topics in learning CSS, many advanced applications and incurable diseases can be implemented using negative margin technology.

Negative margin theory:

In the description of what is negative margin, you have to know what margin is a thing, if not clear can read my previous article, "Don't Tell me You know margin", pre-fill the knowledge, back to read this article, believe that both articles can bring you a lot of harvest.

For the sake of image and understandable explanation of negative margin, we will introduce a reference line that is not on the world's wall. What is a reference line? The reference line is the Datum point for the margin movement, which is stationary relative to box (itself). The margin value is the amount of the box's displacement relative to the reference line.

A full margin property is written so margin:top right bottom left; (eg:margin:10px 20px 30px 40px). There are two types of guides in the margin attribute, the top and left guides belong to one class, and the guides for right and bottom belong to another category. Top and left are other elements for reference, and right and bottom are referenced by the elements themselves. the displacement direction of margin refers to the case where the margin value is positive, and if it is negative, the displacement is in the opposite direction.

The above text and picture may be difficult to understand, let's look at the actual code:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title>margin Reference line example </title><style type=" Text/css ">*{margin:0; padding:0;}. wrap{width:400px; border:5px solid #aaa;}. example{width:200px; height:200px; background: #CCCCFF;}. normal{width:200px; height:200px; background: #CCE8CF;} /* Add or comment out the margin properties below to see the difference. example{margin:-10px 20px-30px 40px;} */</style>
To parse this code, there is an adjacent element below the example element Normal (note: the example element after adding and removing a margin is analyzed here, and the normal element is used only as a reference to the effect before and after the example element).
Based on the reference line above, margin:-10px (top) 20px (right) -30px (bottom) 40px (left); On the -10px and left 40px will be outside the element as a reference, the so-called outer element is the boundary element of this element (then the interpretation of the vernacular point is the element's immediate element, here involves containing block knowledge, can be self-search online). The boundary element of the example element is the wrap parent element, The Wrap parent element is the datum point, and the margin-top of the example is -10px, imagine what happens if Margin-top is +10px here, yes, if it's +10px, The example element is based on the edge of the wrap parent element, then the example element creates a gap margin with the wrap parent element 10px, which, in turn, margin-tip:-10px, or the edge of the wrap parent element, which in turn pushes the 10px distance position upward. The margin-left of the example element is 40px, where the normal logic is separated by 40px margins, and if it is -40px, it is the opposite direction to the left to push the 40px distance position.
Then look at the example elements of the margin-right and Margin-bottom, from the above learned that these two values are based on the element itself as a reference. What is referred to as the element itself, the exact meaning refers to the position of the surrounding element as a reference to itself (essentially the reference line affecting the bottom and right adjacent elements). The margin-bottom here is -30px, with no change to its own position, but has a great effect on the normal element of its underlying element, because the upper boundary element of the normal element is the example element. According to the example element boundary to determine its own position, imagine if the example element Margin-bottom as +30px, then the example element will be separated from below the normal element, and vice versa -30px, Below the normal element due to the example reference line concave, resulting in the normal element of his own involuntarily was "raised" up. This is what it means to influence the position of the surrounding elements as a reference.
here to comb the rules, when the margin four value is a positive value, then the margin according to normal logic and the surrounding elements to produce margins. When the top and left of the element margin are negative, it causes the element to move up or to the left. When the bottom and right of the element margin are negative, the reference lines of the adjacent elements on the left and bottom are affected. If you want to learn more about the theory of reference lines, you can also visit the margin properties of this article.
Negative margin Combat:
As far as I know, there is not a complete set of articles on the topic of negative margin. There is also only partial theory or partial example, theory is the theory after all, the use of knowledge is fundamental, and have an example you have to know the principle, the award of the mermaid than to give people to fish. Next we will use four examples to further explain the application of negative margin technology.
Negative margin application in tab tab:
Effect preview:

 
 

  
  
 
   
Front
 
   
Actual combat
 
   
Interaction
 
   
Optimization
 
  
 
 
This is the content of the first tab, today, the application of negative margin technology is more and more extensive, any large site under the glimpse will have its shadow. I think the negative margin technology is one of the indispensable topics in learning CSS, many advanced applications and incurable diseases can be implemented using negative margin technology.
Core Analysis:
As the above tab tab effect, the core is the two lines highlighted below the code, the second row of the margin-bottom:-1px, so that the body part of the bottom up "lift" the distance of 1px, To achieve the mouse up after the tab white cover the bottom of the black border effect (note: Because IE is not a standard, so when the mouse moved to the tab, you need to add an additional property position:relative; To fix the bug that IE does not cover the bottom border). The purpose of the margin-left:-1px is to have four tabs move 1px away to the left, reaching only one split line between left and right.
CSS code:
. demotab{width:400px; font:14px/1.5 Microsoft Yahei,verdana,helvetica,arial,sans-serif;}. Demotab. demotabhd{margin-bottom:-1px; border:1px solid #6C92AD; border-bottom:none; background: #EAF0FD;}. Demotab. demotabnav{height:28px; overflow:hidden; *zoom:1;}. Demotab. demotablist{float:left; margin-left:-1px;  padding:0 22px; line-height:28px; border-left:1px solid #6C92AD; border-right:1px solid #6C92AD;  Font-weight:bold; Color: #005590; Text-align:center; Cursor:pointer;}. Demotab. demotablist.current{position:relative; background: #fff;}. Demotab. demotabbd{border:1px solid #6C92AD;}. Demotab. demotabbd. roundbox{padding:15px;}. Demotab. Demotabcontent{display:none;}. Demotab. Demotabcontent.current{display:block;}
HTML code:
  <div id= "Demotab" class= "Demotab" >    <div class= "Demotabhd" >      <ul class= "Demotabnav clearfix" >        <li class= "Demotablist current" > Front end </li>        <li class= "demotablist" > Combat </li>        <li class= "Demotablist" > Interactive </li>        <li class= "demotablist" > Optimization </li>      </ul>    </div>    <div class= "DEMOTABBD" >      <div class= "Roundbox" >        <div class= " Demotabcontent Current "> This is the content of the first tab. </div>        <div class= "Demotabcontent" > This is the contents of the Second tab. </div>        <div class= "Demotabcontent" > This is the content of the Third tab. </div>        <div class= "Demotabcontent" > This is the contents of the Fourth tab. </div>      </div>    </div>  </div>
Negative margin negative displacement technology application:
Effect preview:

Core Analysis:
The above is similar to the mall selling goods postmark effect is also implemented by negative margin, the former use of relative/absolute such as "dangerous" attribute instead of a relatively "moderate" margin attribute. The core is that the small postmark image uses the negative margin-top to move upward to achieve a similar absolute overlay effect.
CSS code:
. demospecitem{width:212px; min-height:178px; _height:178px;}. Demospecitem. Demoitempic{display:block; text-align:center;}. Demospecitem. Demoitempic img{padding:5px; border:1px solid #ccc;}. Demospecitem. Demoicon{display:block; margin:-185px 0 0 150px;}
HTML code:
  <div class= "Demospecitem" >    <a href= "javascript:void (0)" class= "Demoitempic" >          </a>    <span class=" Demoicon " ></span>  </div>
Using negative margin to make scale-based navigation:
Effect preview:

 
 

  
  
 
   
Scale navigation
 
   
Front-end development
 
   
User Experience
 
   
Main combat
 
  
 
 
Core Analysis:
Scale-type navigation can be said to be one of the best occasions to use negative margin technology. As the above example, try to imagine not to use negative margin, simple use of pictures to make such scale-type navigation, imagine the next cut, positioning, click the picture switch, the middle of the border part of the mask, maintenance of the development of the workload, light think of these will shudder. The use of negative margin here only add a margin-left can be achieved before and after the effect of coverage.
CSS code:
. Demonav. demolist{float:left; width:154px; height:53px; margin:0 0 0-20px;}. Demonav. demolist.firstlist{margin:0;}. Demonav. demolist a{display:block; line-height:53px; padding:0 0 0 25px; Color: #005590; Background:url ("Flakenavtab.png") left top no-repeat; Font-weight:bold; Text-decoration:none;}. Demonav. Demolist a:hover{background:url ("Flakenavtabhover.png") left top no-repeat;}. Demonav. Demolist.current a{background:url ("Flakenavtabcurrent.png") left top no-repeat;}. Demonav. Demolist.current a:hover{background:url ("Flakenavtabcurrent.png") left top no-repeat;} /* Fix IE6 hover issue */
HTML code:
  <div id= "Demonav" class= "Demonav" >    <ul class= "Clearfix" >      <li class= "Demolist firstlist Current "><a href=" javascript:void (0) "> scale navigation </a></li>      <li class=" Demolist "><a href= "javascript:void (0)" > Front-end development </a></li>      <li class= "demolist" ><a href= "javascript: void (0) "> User experience </a></li>      <li class=" demolist "><a href=" javascript:void (0) "> Combat main < /a></li>    </ul>  </div>
Making adaptive left and right layouts with negative margin:
Effect preview:
The negative margin can replace float floating layout, the left and right layout planning, and has the self-adaptive effect that float does not have. You can try clicking the variable width and narrowing button to see this example. Today, the application of negative margin technology is more and more extensive, any large site under the glimpse will have its shadow. 
Core Analysis:
such as the above layout effect (a fixed picture on the left, the content on the right), negative margin can replace the float floating layout, layout planning, and has no adaptive effect of float. You can try clicking the variable width and narrowing button to see this example. You may also find the third "do not set minimum width" button, what is this for? You can use the standard browser to view the above example, click the Width button to the widest, then click the Do not set the minimum width button, you will find that a bug occurred. Negative margin used as a layout effect is unique, but there is a small flaw in itself, that is, if the last child element of the interior uses a negative margin, because the parent element is its margin element, its actual height is also smaller as the inner child element moves up. The solution is to set a minimum height, the minimum height value is a small fixed element height (This example is the left fixed image height), you can completely solve the negative margin up affects the height of the parent element bug.
CSS code:
. demolayout{width:500px; border:1px solid #aaa; background: #EEEEEE;}. Demolayout. roundbox{padding:10px; min-height:170px; _height:170px;}. Demolayout. Demoshowpic img{padding:1px; border:1px solid #DAA520;}. demotext{margin:-170px 0 0 215px;}. demolayoutbtn{margin:15px 0 0 0;}
HTML code:
  <div id= "Demolayout" class= "Demolayout" >    <div class= "Roundbox" >      <div class= "Demoshowpic" ></div>      <div class= "Demotext" > Using negative margin to make adaptive left and right layouts </div>    </div>  </div>
Conclusion:
Based on the above examples, I believe you have a relatively complete understanding of the negative margin technology. Negative margin can not only make the general CSS properties could not achieve the effect can also be reduced to simple, the miracle of decay for magic, of course, negative margin to use the place is not only these, there are many effects are required to achieve the negative margin technology, as long as you patiently to practice to explore, I'm sure you'll find more negative margin for the occasion.
I know you don't know the negative margin