Shulou(Shulou.com)06/03 Report--

This article will explain in detail what are the restrictions on absolute and relative in CSS, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

One of the restrictions of relative on absolute

Absolute, with four skills of top, right, bottom and left, allows birds to fly and the sea to jump; he can go wherever he wants, free, and life is so beautiful.

Until one day, on the way out to play, I met a relative and jumped out and shouted, "this mountain is opened by me, and this tree is planted by me. I want to pass by and stay and buy money!"

Then, our lovely absolute children obediently succumbed.

But the unscrupulous relative unexpectedly did not let go when he received the benefits, and did not let absolute pass. Well, that's the story. I'm sure we all understand.

Well, let's write a demo. Look at this:

XML/HTML Code copies content to the clipboard

Relative restrictions on absolute 1. 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 }

Today, the absolute children went out to play, turned on the combination of left:0; top:0; skills, everything went well and reached the horizon.

Today, the absolute children went out to play again, also turned on the combination of left:0; top:0; skills, but the weather is not beautiful, go out to meet the bad guy relative, so stop at the place of relative.

The second restriction of relative on absolute

It was mentioned last time that absolute children were stopped halfway by relative when they went out to play with four skills: top, right, bottom and left.

This time the absolute partner has learned a lesson, do not need those four skills, with margin negative skills, can also run out to play.

Very good, although there is a magic enchantment of overflow:hidden around the house, but our absolute children directly ignore it and pass calmly, everyone applaud!

But, but that unscrupulous relative came again.

Fortunately, fortunately, this time is margin negative skills, absolute children successfully broke through the limit of relative, ran out.

Well, there seems to be something wrong.

Why is that part of my body missing when I ran out?

Demo is here:

XML/HTML Code copies content to the clipboard

Relative restrictions on absolute 2. 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;}

Today, the absolute children went out to play.

In view of the embarrassment caused by relative when I last used top, right, bottom, and left skills, I used margin negative skills today.

Although overflow:hidden was set up around the house, the powerful child still ran out.

Today, absolute children go out to play again, using the same negative margin skills.

The overflow:hidden property was also set around the house, but the powerful child still ran out.

Hey, what's going on? what about the part of my body outside my house?

Damn it, relative. When did you get here?

After these two events, absolute children began to hate relative friends, in a familiar phrase is, "I never want to see you again!"

Please give absolute freedom.

Absolute children are born to fly and use top, right, bottom and left to go wherever they want.

Absolute children can also accurately locate negative values of margin and play as much as they want.

Absolute children are so cute, you can't believe this:

So Q, so cute, why should be restricted, the baby yearns for the sky and freedom! Aah! Aah! Aah! Aah!

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

However, the ideal is very plump, the reality is very skinny.

Absolute is impossible to get what you want. When positioning, you will more or less use relative to restrict absolute. After all, absolute is so good at flying that you can't do without restrictions.

However, restrictions belong to restrictions, this is only a feud between relative and absolute, do not affect other flowers and plants.

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

Let's take an example, as follows:

XML/HTML Code copies content to the clipboard

Relative impact minimization * {margin:0;} .progresper {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;}

This is what it looks like without any positioning and normal flow.

Follow-up.

What if we want to locate the image to the upper-left corner of the black border?

Very simple, absolute positioning, without any offset, fine-tuning with margin, complete!

What if we want to position the image to the upper right corner of the black border?

The first method, like just now, is directly absolute positioning and then adjusted with margin; this method consumes a little bit of brain cells and calculates how many pixels should be shifted.

The second method is the relative+absolute positioning that everyone likes to hear and see.

However, for the sake of absolute's dislike of relative, relative should only bully it and don't affect other flowers and plants.

Specifically, add a layer of div to the image that needs to be located, and set the relative so that the relative affects only the elements that need absolute positioning.

Minimize relative impact!

This is the end of the restrictions on absolute and relative in CSS. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.