CSS positioning Effect

Today, when I made an effect, I needed the CSS positioning effect to implement it. So I learned about CSS and played with absolute and relative for a while, there is always no way to achieve satisfactory results. No. What should I do? Search. In this age, the problem still depends on search engines. Only when I learned about positioning on the internet can I find that my previous understanding of positioning is incorrect and I have adjusted it.CodeTo achieve the desired effect, so that you can learn more and leave your experience here.

The effect I want to achieve is very simple, that is, adding another image to an image is a bit messy, and I still can see it directly.

()
(Source image)

I believe you are familiar with the figure. If you are familiar with this effect, you don't need to watch it again. If you are interested, let's continue to look at it (but you 'd better have a simple CSS knowledge )~~

To put it bluntly, we still use the relative and Absolut of the position attribute to achieve this effect, but these two values often make people feel "self-righteous. You must note that both relative and absolute here have a reference object.

Before that, let's first introduce the concept "regular document flow", the element of our general layout"<H1> This is a header <P> This is some text </P><P> and even more text </P>"They are all arranged in the order of their layout. This is a regular document stream.

"Position: absolute" is the starting point in the upper left corner of the Body element or the one closest to the DIV with postion: absolute.Postion attributesOfParent levelThe upper left corner of the DIV is the starting point. You can use the left, top, right, and bottom attributes to perform operations. This positioning method exceeds the conventional Document Stream, so it will not affect other elements (it will not cause changes in the positions and sizes of other elements

)

"Postion: relative" uses the body elementReference objectOrParent levelDivReference object(Not superstart point ). You can use the left, top, right, and bottom attributes to perform operations.

To illustrate the problem, let's take a few examples:

Sample Code
< Html >
< Head >
</ Head >
< Body Style = "Margin: 0px 0px" >

< Div ID = "Div0" Style = "Width: 100px; Height: 100px; Border: 1px solid # AAA" > Common div1
< Div ID = "Div1" Style = "Position: absolute; left: 100px; top: 100px; Border: 1px solid # CCC; width: 100px; Height: 100px ;" >
Absoulte is used here.
</ Div >
</ Div >
< Div ID = "Div0" Style = "Width: 100px; Height: 100px; Border: 1px solid # AAA" > Common div2
< Div ID = "Div2" Style = "Position: relative; left: 100px; top: 100px; Border: 1px solid # CCC; width: 100px; Height: 100px ;" >
Relative is used here.
</ Div >
</ Div >

</Body>
</Html>

 

:

Through the above figure, I think you should see something?

Common divs belong to Common Document streams, so they are arranged in order. When absolute is used, the normal div1 is not affected because it exceeds the normal document stream, and it is precisely located at the starting point in the upper left corner of the browser.

After relative is used, we will find that it is different from absolute. It uses the parent Div as the reference object, but not the start point of the parent object as the reference point. We can see that the length of common div2 is extended, and the distance is exactly the height of the word "ordinary div2. What does this mean?

This indicates that relative is first processed as a regular document stream, that is to say, layout is performed first in order and should appear below "ordinary div2.

Therefore, because the height of the DIV with relative is PX, the ordinary div2 is stretched. After that, the DIV with relative is processed according to absolute.

If you understand, you can use the two values of the postion attribute to achieve the corresponding effect.

The idea for implementing the starting effect is as follows:

We can select a div as the image container (with the position attribute added, I set it to relative because it can be used in the regular document stream, and it can be relatively static relative to the window size), and then add a DIV in the container (set the position attribute to absolute, because we want this layer to overwrite the original image, if relative is selected, it will first be processed according to the conventional Document Stream. Although the overwrite effect can be achieved through the left, top, bottom, and right attributes, it will also affect the size of the original Div), and then top is adjusted, bottom can achieve the effect.

The Code is as follows:

Effect code
< Div Style = "Position: relative; width: 86px; Height: 110px; Border: 1px solid; float: Left; margin-Right: 20px" >
< IMG Width = "86" Height = "110" SRC Else '1.jpg' ALT = ""   />
< Div Style = "Position: absolute; Background: URL (images/new.gif) No-Repeat; width: 37px; Height: 37px; top: 0px ;" > </ Div >
< Div Style = "Position: absolute; top: 88px; width: 86px; Height: 22px; text-align: center; Background: white; filter: alpha (opacity = 50 );" >
Title
</ Div >
</ Div >