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

<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" >
< title > Relative restrictions on absolute 1 </ title >
< style >
.box {
width:500px;
height:250px;
background-color: pink;
margin:30px auto 50px;
line-height: 250px;
text-align:center;
}
.box p {
display: inline-block;
vertical-align: middle;
width:300px;
font-size: 16px;
line-height: 1.5;
text-align: left;
}
.box2 p {
margin-left: 30px;
}
.box img {
position: absolute;
left:0;
top:0;
}
.box2 {
position: relative;
}
</ style >
</ head >
< body >
< div class = "box box1" >
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< 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 >
</ div >
< div class = "box box2" >
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< 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 >
</ div >
</ body >
</ 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

<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" >
< title > Relative restrictions on absolute 2 </ title >
< style >
.box {
width:500px;
height:250px;
background-color: pink;
margin:50px auto 50px;
overflow: hidden;
}
.box p {
margin: 20px 30px 20px 120px;
text-align: left;
}
.box img {
position: absolute;
margin-left:-30px;
margin-top: -45px;
}
.box2 {
position: relative;
}
</ style >
</ head >
< body >
< div class = "box box1" >
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< p > Today, little absolute went out to play. </ p >
< 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 >
< p > Although overflow:hidden is set around the house, this powerful kid still ran out. </ p >
</ div >
< div class = "box box2" >
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< p > Today, absolute went out to play again, and he also used the margin negative skill. </ p >
< p > The overflow:hidden attribute is also set around the house, but this powerful kid still ran out. </ p >
< p > Hey, what's going on? Where is the part of my body outside my house? </ p >
< p > Oh my god, relative, when did you come? </ p >
</ div >
</ body >
</ 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

<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" >
< title > Minimize relative impact </ title >
< style >
* {
margin:0;
}
.wraper {
width:800px;
margin:50px auto;
background-color: #ccc;
border: 3px solid green;
}
.box {
width:500px;
margin:50px auto;
background-color: orange;
border: 3px solid black;
}
img {
border:1px solid blue;
margin:10px;
}
p {
padding-left:10px;
margin:10px;
}
.absolute {
position: absolute;
}
.box2 .absolute {
margin-left: -3px;
margin-top: -3px;
}
.box3 .absolute {
margin-top:-3px;
margin-left:450px;
}
.box4 .relative {
position: relative;
border:2px solid red;
}
.box4 .absolute {
top:-10px;
right:-10px;
}
</ style >
</ head >
< body >
< div class = "wraper" >
< div class = "box box1" >
< img src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "A picture" style = "width:50px;height:30px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< p > This is what a normal flow looks like without any positioning. </ p >
< p > Follow-up. . . </ p >
</ div >
</ div >
< div class = "wraper" >
< div class = "box box2" >
< img class = "absolute" src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "A picture" style = "width:50px;height:30px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< p > What should we do if we want to position the image to the upper left corner of the black border? </ p >
< p > It’s very simple, absolute positioning, no offset, fine-tuning with margin, done! </ p >
</ div >
</ div >
< div class = "wraper" >
< div class = "box box3" >
< img class = "absolute" src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "A picture" style = "width:50px;height:30px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< p > What should we do if we want to position the image to the upper right corner of the black border? </ p >
< p > The first method is to use absolute positioning as before, and then use margin to adjust;
This method requires some brain cells to calculate how many pixels should be shifted. </ p >
</ div >
</ div >
< div class = "wraper" >
< div class = "box box4" >
< div class = "relative" >
< img class = "absolute" src = "http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt = "A picture" style = "width:50px;height:30px" />
</ div >
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< img src = "http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt = "A picture" style = "width:100px;height:150px" />
< p > The second method is the relative + absolute positioning that everyone loves. </ p >
< p > However, since absolute hates relative so much, relative should just bully it and make sure not to affect other flowers and plants. </ p >
< 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 >
< p > Minimize relative impact! </ p >
</ div >
</ div >
</ body >
</ 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