In the beginning I want to solve a problem first, how to set up a div box to fill the entire screen.
look at the following HTML code:
<body>
<div id= "Father-body" >
<div class= "item1" ></div>
</div>
</body>Implementation method One:
HTML, body, #father-body{
height:100%;
width:100%;
Background-color: #123456;
}Here is the main explanation for the following% (percent semicolon) problem used in CSS. % is used only when the parent element or ancestor element defines a fixed width and height (or when it works).
Implementation method Two:
#father-body{
position:fixed;
width:100%;
height:100%;
Background-color: #123456;
}This sets the position property for #father-body, triggering its own BFC. When you use the width and height of their own time to take effect.
the meaning of the fixed value of the position:
object is detached from the regular stream, using attributes such as top,right,bottom,left to position the window as the reference point, and the object does not scroll with the scroll bar when it appears. The concept of several values of the position attribute:
1. Relative positioning
with the above definition, let's look at a piece of code:
<! DOCTYPE html>The effect of the following figure:
When we use a property such as top right bottom left, the CSS code is as follows:
<style type= "Text/css" > item1,. item2, item3{ width:300px; height:100px; Background-color: #123456; margin:20px } . item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>the effect you can see is the following figure:
Here you can verify that when you use top right bottom left (these four properties can set a specific number of pixels can also set a percentage) this property changes the position of the element without affecting the position of the other elements. Changing the position of an element by using a property such as margin can affect the location of other elements.
The schematic diagram below (picture from W3cschool):
2. Absolute positioninglook at the following section of code:
<! DOCTYPE html>The effect chart is as follows:
We set the absolute positioning attribute for Box-2
. item2{ position:absolute; }At this point, Box-2 out of the document stream with the following effect:
The position of the Box-3 at this time will occupy the position of the previous Box-2. And the left border of Box-2 and Box-3 will coincide. And the width of the box will adapt to the elements inside the box.
It still occupies its original position when the box has an absolute positioning but it does not use the bottom left to set the box offset.
So what happens when you set top right bottom left these properties?
Set the following code:
. item2{ Position:absolute; top:0; right:0; }The effect of the following figure:
So what happens when we set the direct parent element to a positioned element?
Two conclusions can be drawn from the above:
1. Use an absolutely positioned box to offset (position) the base of its "nearest" "ancestor element" of "positioned". If there are no ancestor elements that are already positioned, the browser window is used to position the datum.
2. The positioning box is detached from the standard stream, which means that they have no effect on the positioning of the brother's box thereafter. The other boxes seem to be just as if the box (absolutely positioned box) does not exist. 3.z-index PropertyThe Z-index property is used to adjust the upper and lower positions of overlapping blocks when positioned, and, as with its name, if the page is an X-y axis, the direction of the page is perpendicular to the z axis. The Z-index large page is on top of its small value.
look at the following code:
. item1{ position:relative; Z-index:3 } . item2{ Position:absolute; top:0; right:0; z-index:1; }Common positioning Expansion:
The following code I have been tested, can achieve results, will not show the effect of the map (if the code has questions can leave a message): 1. Horizontally centered 1.1 horizontal elements within the line center
1.2 block-level elements are centered horizontally/* Inline Element Horizontal Center /#body-div{ text-align:center; }more than 1.3 block-level elements are horizontally centered/* block-level element horizontal Center /#body-div{ margin:0 auto; }2. Horizontal Vertical Center 2.1 The vertical level of the known width height is centered/* Multiple block-level elements are horizontally centered /#body-div{ text-align:center; } # #body-div-container{ display:inline-block; }2.2 Vertical Horizontal center with unknown width height/* Known height and width Horizontal Vertical Center * * #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; Position:absolute; top:50%; left:50%; margin:-50px 0 0-50px; }2.3 When the centered element is inline or inline-block/* Unknown height and Width Horizontal Vertical Center * * * #body-div{ position:relative; } # #body-div-container{ position:absolute; Margin:auto; top:0; right:0; bottom:0; left:0; }#body-div{Display:table-cell; Text-align:center; Vertical-align:middle; # #body-div-container{}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
