Home >Web Front-end >HTML Tutorial >[Learn Web front-end from 0 to 1] CSS positioning problem three (relative positioning, absolute positioning)_html/css_WEB-ITnose
[Learn Web front-end from 0 to 1] CSS positioning problem three (relative positioning, absolute positioning)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:35989browse
Introduction:
At the beginning, I wanted to solve a problem first. How to set 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 are the main explanations Problems with using % (percent sign) in CSS. % can only be used when the parent element or ancestor element has fixed width and height defined (or it will have an effect when used).
Implementation method two:
#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; } Here, set the position attribute for #father-body to trigger its own BFC. It only takes effect when using width and height on itself.
The meaning of the fixed value of position:
The object is separated from the regular flow, and the top, right, bottom, left and other attributes are used to position the window as the reference point. When it appears The object will not scroll with the scroll bar.
Concepts of several values of the position attribute:
1. Relative positioning
With the above Definition, let’s look at a piece of code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <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></head><body> <div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div></body></html> The effect is as follows:
When we use attributes like 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 as follows:
Go here to verify that when using top right bottom left (These four attributes can set a specific number of pixels or a percentage) When this attribute changes the position of an element, it will not affect the position of other elements. Using attributes like margin to change the position of an element will affect the position of other elements.
The schematic diagram is as follows (picture from W3CSchool):
2. Absolute positioning
Look below A piece of code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style></head><body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> </div></body></html> The rendering is as follows:
We set the absolute positioning attribute for Box-2
.item2{ position:absolute; } At this time, Box-2 is out of the document flow, and the effect is as follows:
At this time, the position of Box-3 will occupy the position of the previous Box-2. And the left borders of Box-2 and Box-3 will overlap. And the width of the box will adapt according to the elements inside the box.
When the box is set to absolute positioning but does not use top right bottom left to set the offset of the box, it will still occupy the original position.
So what will be the effect when setting the properties top right bottom left?
Set the following code:
.item2{ position:absolute; top:0; right:0; } The effect is as follows:
Then when we put the direct What happens if the parent element is set to a positioned element?
Two conclusions can be drawn from the above:
1. Use an absolutely positioned box to its "nearest" one that has been "already positioned" The "ancestor element" is used as the basis for offset (positioning). If there is no ancestor element that has been positioned, then the positioning will be based on the browser window.
2. Definitely positioned boxes are detached from the standard flow, which means they have no impact on the positioning of subsequent sibling boxes. Other boxes seem to act as if this box (absolutely positioned box) does not exist.
3.z-index attribute
The z-index attribute is used to adjust the upper and lower positions of overlapping blocks when positioning, just like its name, if the page is x-y axis , then the direction perpendicular to the page is the z-axis. Pages with a large z-index are placed above those with a small z-index.
Look at the following code:
.item1{ position:relative; z-index:3; } .item2{ position:absolute; top:0; right:0; z-index:1; }
Common positioning expansion:
I have personally tested the following codes and they all work, so I will not show the renderings (if you have any questions about the code, please leave a message):
1. Horizontal centering
1.1 Horizontal centering of inline elements/*行内元素水平居中*/ #body-div{ text-align:center; } 1.2 Horizontal centering of block-level elements /*块级元素水平居中*/ #body-div{ margin:0 auto; } 1.3 Horizontal centering of multiple block-level elements /*多个块级元素水平居中*/ #body-div{ text-align:center; } ##body-div-container{ display:inline-block; } 2. Horizontal and vertical centering
2.1 Vertical and horizontal centering with known width and height/*已知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; } 2.2 Vertical and horizontal centering with unknown width and height /*未知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } ##body-div-container{ position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; } 2.3 When the centered element is inline or inline-block #body-div{ display:table-cell; text-align:center; vertical-align:middle; } ##body-div-container{ }