What we have to say about CSS absolute and relative

What we have to say about CSS absolute and relative

Written in the opening:

Absolute said: "Relative, I don't want to see you in my life!"

Why? They obviously love each other so much and are inseparable. What unknown story has happened between them that makes absolute hate relative so much?

To find the answer to your question, follow me. . .

One of the limitations of relative to absolute

Absolute, with the four skills of top, right, bottom and left, from now on, the sky is high for birds to fly and the sea is wide for fish to jump; you can go wherever you want, freely and life is so beautiful.

Until one day, on the way out, I met a relative who jumped out and shouted, "I opened this mountain and planted this tree. If you want to pass by here, you have to leave money for passage!"

Then, our lovely absolute kid surrendered obediently.

But the unscrupulous relative refused to release the document even after receiving the benefits and refused to let the absolute pass. . . Well, that's the story. . . I believe everyone understands. . .

Well, let's write a demo, see here:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3.      < head >   
  4.          < meta   charset = "utf-8" >   
  5.          < title > Relative restrictions on absolute 1 </ title >   
  6.          < style >   
  7. .box {
  8. width:500px;
  9. height:250px;
  10. background-color: pink;
  11. margin:30px auto 50px;
  12. line-height: 250px;
  13. text-align:center;
  14. }
  15.   
  16. .box p {
  17. display: inline-block;
  18. vertical-align: middle;
  19. width:300px;
  20. font-size: 16px;
  21. line-height: 1.5;
  22. text-align: left;
  23. }
  24.   
  25. .box2 p {
  26. margin-left: 30px;
  27. }
  28.   
  29. .box img {
  30. position: absolute;
  31. left:0;
  32. top:0;
  33. }
  34.   
  35. .box2 {
  36. position: relative;
  37. }
  38.   
  39.          </ style >   
  40.      </ head >   
  41.      < body >   
  42.          < div   class = "box box1" >   
  43.              < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  44.              < p > Today, absolute went out to play, activated the left:0; top:0; skill combination, and everything went smoothly, and he reached the horizon. </ p >   
  45.          </ div >   
  46.   
  47.          < div   class = "box box2" >   
  48.              < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  49.              < p > Today, absolute went out to play again, and activated the left:0; top:0; skill combination. However, the weather was not good, and he ran into the bad guy relative as soon as he went out, so he stopped at relative's place. </ p >   
  50.          </ div >   
  51.      </ body >   
  52. </ html >   

The second limitation of relative on absolute

Last time, we talked about how absolute was stopped by relative when he was going out to play with the four skills of top, right, bottom and left.

This time, absolute's friend learned his lesson and no longer used those four skills. He used the margin negative value skill and was still able to go out and play.

Very good! Although there is an overflow:hidden magic barrier around the house, our absolute kid simply ignored it and passed through calmly. Let’s applaud! ! !

But, but, but that unscrupulous relative is here again.

Fortunately, fortunately, fortunately this time it was a margin negative skill, and absolute kid successfully broke through the relative limitation and ran out. . .

Uh, something seems wrong. . .

Why did the part of my body disappear when I ran away?

Here is the demo:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3.      < head >   
  4.          < meta   charset = "utf-8" >   
  5.          < title > Relative restrictions on absolute 2 </ title >   
  6.          < style >   
  7. .box {
  8. width:500px;
  9. height:250px;
  10. background-color: pink;
  11. margin:50px auto 50px;
  12. overflow: hidden;
  13. }
  14.   
  15. .box p {
  16. margin: 20px 30px 20px 120px;
  17. text-align: left;
  18. }
  19.   
  20. .box img {
  21. position: absolute;
  22. margin-left:-30px;
  23. margin-top: -45px;
  24. }
  25.   
  26. .box2 {
  27. position: relative;
  28. }
  29.   
  30.          </ style >   
  31.      </ head >   
  32.      < body >   
  33.          < div   class = "box box1" >   
  34.              < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  35.              < p > Today, little absolute went out to play. </ p >   
  36.              < p > Considering that I encountered relative when I used the top, right, bottom, and left skills last time, which made it difficult for me to get out, I used the margin negative skill today. </ p >   
  37.              < p > Although overflow:hidden is set around the house, this powerful kid still ran out. </ p >   
  38.          </ div >   
  39.   
  40.          < div   class = "box box2" >   
  41.              < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  42.              < p > Today, absolute went out to play again, and he also used the margin negative skill. </ p >   
  43.              < p > The overflow:hidden attribute is also set around the house, but this powerful kid still ran out. </ p >   
  44.              < p > Hey, what's going on? Where is the part of my body outside my house? </ p >   
  45.              < p > Oh my god, relative, when did you come? </ p >   
  46.          </ div >   
  47.      </ body >   
  48. </ html >   

After these two incidents, Absolute began to hate Relative. To put it in a familiar way, "I never want to see you again!"

Please give absolute freedom

Absolute children are born with the ability to fly. They can go wherever they want using top, right, bottom and left.

Absolute children can also use negative margin values ​​for precise positioning and can play with it however they want.

Absolute kids are so cute, if you don’t believe me, just look:

So cute and adorable, why should it be restricted? The baby yearns for the sky and freedom! ah! ah! ah! ah!

Absolute said: "Relative, I never want to see you again!"

However, ideals are full and reality is skinny . . .

It is impossible to achieve what you want with absolute. When positioning, relative will be used to limit absolute to a certain extent. After all, absolute is so versatile that it cannot be avoided.

However, restrictions are restrictions, this is just a grudge between relative and absolute, and it must not affect other flowers and plants.

Therefore, when we use relative + absolute positioning, we must follow the principle of minimizing relative impact .

Here is an example:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3.      < head >   
  4.          < meta   charset = "utf-8" >   
  5.          < title > Minimize relative impact </ title >   
  6.          < style >   
  7. * {
  8. margin:0;
  9. }
  10.   
  11. .wraper {
  12. width:800px;
  13. margin:50px auto;
  14. background-color: #ccc;
  15. border: 3px solid green;
  16. }
  17.   
  18. .box {
  19. width:500px;
  20. margin:50px auto;
  21. background-color: orange;
  22. border: 3px solid black;
  23. }
  24.   
  25. img {
  26. border:1px solid blue;
  27. margin:10px;
  28. }
  29.   
  30. p {
  31. padding-left:10px;
  32. margin:10px;
  33. }
  34.   
  35. .absolute {
  36. position: absolute;
  37. }
  38.   
  39. .box2 .absolute {
  40. margin-left: -3px;
  41. margin-top: -3px;
  42. }
  43.   
  44. .box3 .absolute {
  45. margin-top:-3px;
  46. margin-left:450px;
  47. }
  48.   
  49. .box4 .relative {
  50. position: relative;
  51. border:2px solid red;
  52. }
  53.   
  54. .box4 .absolute {
  55. top:-10px;
  56. right:-10px;
  57. }
  58.          </ style >   
  59.      </ head >   
  60.      < body >   
  61.          < div   class = "wraper" >   
  62.              < div   class = "box box1" >   
  63.                  < img   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "A picture"   style = "width:50px;height:30px"   />   
  64.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  65.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  66.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  67.                  < p > This is what a normal flow looks like without any positioning. </ p >   
  68.                  < p > Follow-up. . . </ p >   
  69.              </ div >   
  70.          </ div > <!--Close wraper-->   
  71.          < div   class = "wraper" >   
  72.              < div   class = "box box2" >   
  73.                  < img   class = "absolute"   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "A picture"   style = "width:50px;height:30px"   />   
  74.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  75.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  76.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  77.                  < p > What should we do if we want to position the image to the upper left corner of the black border? </ p >   
  78.                  < p > It’s very simple, absolute positioning, no offset, fine-tuning with margin, done! </ p >   
  79.              </ div >   
  80.          </ div > <!--Close wraper-->   
  81.          < div   class = "wraper" >   
  82.              < div   class = "box box3" >   
  83.                  < img   class = "absolute"   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "A picture"   style = "width:50px;height:30px"   />   
  84.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  85.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  86.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  87.                  < p > What should we do if we want to position the image to the upper right corner of the black border? </ p >   
  88.                  < p > The first method is to use absolute positioning as before, and then use margin to adjust;
  89. This method requires some brain cells to calculate how many pixels should be shifted. </ p >   
  90.              </ div >   
  91.          </ div > <!--Close wraper-->   
  92.          < div   class = "wraper" >   
  93.              < div   class = "box box4" >   
  94.                  < div   class = "relative" >   
  95.                      < img   class = "absolute"   src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg"   alt = "A picture"   style = "width:50px;height:30px"   />   
  96.                  </ div >   
  97.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  98.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  99.                  < img   src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt = "A picture"   style = "width:100px;height:150px"   />   
  100.                  < p > The second method is the relative + absolute positioning that everyone loves. </ p >   
  101.                  < p > However, since absolute hates relative so much, relative should just bully it and make sure not to affect other flowers and plants. </ p >   
  102.                  < p > Specifically, add a div layer to the image that needs to be positioned, set relative, and let this relative only affect the elements that need to be absolutely positioned. </ p >   
  103.                  < p > Minimize relative impact! </ p >   
  104.              </ div >   
  105.          </ div > <!--Close wraper-->   
  106.      </ body >   
  107. </ html >   

The above is all I have to say about CSS absolute and relative. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html

<<:  MySQL stored functions detailed introduction

>>:  Summary of several implementations of returning to the top in HTML pages

Recommend

Detailed explanation of the default values ​​of width and height in CSS: auto and %

in conclusion % of width: defines the percentage ...

Solve the 1251 error when establishing a connection between mysql and navicat

I reinstalled the computer and installed the late...

Best Practices for Implementing Simple Jira Projects with React+TS

A set of projects for training react+ts Although ...

How to create (CREATE PROCEDURE) and call (CALL) a MySQL stored procedure and how to create (DECLARE) and assign (SET) a variable

This article uses examples to describe how to cre...

JavaScript parseInt() and Number() difference case study

Learning objectives: The two functions parseInt()...

How to restore a database and a table from a MySQL full database backup

In the official MySQL dump tool, how can I restor...

Linux confirms that the data disk has been uninstalled and a new custom image can be created

Custom Image FAQ How to view the data disk? You c...

Introduction to the process of building your own FTP and SFTP servers

FTP and SFTP are widely used as file transfer pro...

Specific use of MySQL internal temporary tables

Table of contents UNION Table initialization Exec...

Example code for implementing beautiful clock animation effects with CSS

I'm looking for a job!!! Advance preparation:...

Detailed explanation of how to deploy and install the Chinese version of Redash in Docker

1. Installation Instructions Compared with local ...

What is flex and a detailed tutorial on flex layout syntax

Flex Layout Flex is the abbreviation of Flexible ...

About the bug of better-scroll plug-in that cannot slide (solved by plug-in in 2021)

Better-scroll scrolling principle As a parent con...

Tomcat obtains the client domain name of Nginx reverse proxy

question After Nginx reverse proxy, the Tomcat ap...

Linux process management tool supervisor installation and configuration tutorial

Environment: CentOS 7 Official documentation: htt...