About CSS Position

CSS learning time is not long, the problem of position has been around unclear. Learn the system today and organize the following:

html{font-size:100%;height:100%;}

Body {

font-family: ' Lato ', Calibri, Arial, Sans-serif;

Color: #fff;

Background: #ADD8E6;

Overflow:hidden;

padding:0;

margin:0;

width:100%;

height:100%;

}

For obvious results, draw 2 guides on the page at the same time

One, position=relative where Page1 and Page2 are the same level objects, both directly with the body as the parent element

1. Initial position

. page1{

width:30%;

height:30%;

Background-color: #fDD8E6;

position:relative;

}

. page2{

width:30%;

height:30%;

Background-color: #ccccc6;

position:relative;

}

Effect:

2. Change the top and left of Page1 and Page2, and the repetition will not be written.

. page1{

top:10%;

left:30%;

}

. page1{

top:10%;

left:30%;

}

As can be seen from the effect, when position:relative, the element movement is relative to its own original position, moving distance is relative to its parent element. For example, the top of Page2 is 10%, and its relative position is the width*10% of the parent element moved relative to the original position of Page2.

3. When Page2 is a child element of Page1

. page1{

width:30%;

height:30%;

Background-color: #fDD8E6;

position:relative;

}

. page2{

width:30%;

height:30%;

Background-color: #ccccc6;

position:relative;

}

The effect is as follows:

Then the size of the Page2 is relative to the page1 of its parent element.

4. When Page1 is still the parent element of Page2, the Page1 position is unchanged, and the location of the Page2 is set to

top:10%;

left:30%;

The effect is as follows:

When the position of Page1 is changed to absolute, the effect is the same:

Therefore, the position and size of the Page2 are relative page1 changes, regardless of page1 position is relative or absolute.

4. If

page1{

Position:absolute;

top:30%;

left:30%;

}

page1{

position:relative;

}

What effect would it be?

So relative is just relative to the parent element change, and then imagine,

page1{

position:relative;

top:30%;

left:30%;

}

page1{

position:relative;

}

And

page1{

position:relative;

top:30%;

left:30%;

}

page1{

position:relative;

top:30%;

left:30%;

}

Relative finally got it.

Through the above experiment, absolute believe you also understand. Both absolute and relative are only looking at the parent element.

About CSS Position