1. Positioning position
Css positioning mechanism: ordinary document flow, floating, positioning
Here mainly introduces the positioning attributes of CSS: position:
1. Positioning principle : allow elements to be relative to the normal position, or relative to the parent element, the position on the browser window
2. Adjustment of element position : left|right attribute, top|bottom Attribute offset attribute to change the position of the element
3. Positioning offset attribute :
left: 0; right: 0; horizontal offset setting
top: 0; bottom: 0; vertical offset setting
1. Positioning attributes:
1.1, static positioning position: static; default value
Equivalent to no positioning, the element appears in the normal document flow. By
default, when we do not write the position attribute, it will be formatted according to the normal document flow. Block elements occupy one line, and inline elements line up in one line.
1.2, relative positioning position: relative;
1. Positioning relative to its own position, occupying the original position (not off the mark, leaving a hole in the hometown, others will not squeeze his position); 2. Reference
elements used as absolute positioning are generally used for fine-tuning elements;
3. , as an absolutely positioned reference element
Example:
Not using relative positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
line-height: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
</div>
</div>
</body>
</html>
Using relative positioning, offset 20px to the right (left) and offset 50px (top) to the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
line-height: 40px;
font-weight: bold;
position: relative;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
</div>
</div>
</body>
</html>
1.3, absolute positioning position:absolute;
Position relative to the nearest positioned parent element
Features :
1. The element is completely separated from the normal document flow without occupying space.
2. Having a positioning parent is equivalent to offsetting the positioning parent. If there is no parent, it will be offset relative to the entire document.
3. Make row-level elements support width and height ;The width of block-level elements without setting width is adaptive
4, promotion level
5, when the positioning offset (top:0;left:0;) is in the upper left corner of the parent
Absolute positioning step! ! ! : child and parent phase
1. Add position:absolute for the box that needs special positioning (positioning box);
2. Set the initial position for absolute positioning, through the left|right attribute and top|bottom attribute:
3. It is the parent of the positioning box Box (with fixed width and height), add position:relative;relative positioning
4. Go back to the positioning box, and use top|bottom, right|left attributes for precise positioning
Relative positioning does not take up space from the original position of the document flow; absolute positioning does not take up space away from the document flow; setting positioning top|bottom, right|left can be left: auto is automatically used for the previous one that has overall positioned another auto
Example without absolute positioning:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
position: relative;
top: 50px;
left: 20px;
}
.smallBoxCenter {
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
<div class="smallBoxCenter">
我是smallBoxCenter盒子
</div>
</div>
</div>
</body>
</html>
Example of using absolute positioning:
first look at when only setting absolute positioning top to 0
position: absolute;
top: 0;
The position covers the original first line of text indicating that the current box is out of the document flow.
Move up 30px and move left 10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
position: relative;
top: 50px;
left: 20px;
}
.smallBoxCenter {
border: 1px solid pink;
position: absolute;
top: -30px;
left: -10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
<div class="smallBoxCenter">
我是smallBoxCenter盒子
</div>
</div>
</div>
</body>
</html>
1.4, fixed positioning position: fixed;
Features:
1. Positioning relative to the browser window
2. Does not occupy space away from the normal document flow
3. Positioning is always relative to the four corners of the browser as the origin. It will not scroll with the content of the page
4. You can make row-level elements support width and height: the width of block-level elements without setting width is adaptive
5. You can increase the level
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
position: relative;
top: 50px;
left: 20px;
}
.smallBoxCenter {
border: 1px solid pink;
position: fixed;
top: 30px;
right: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
<div class="smallBoxCenter">
我是smallBoxCenter盒子
</div>
</div>
</div>
</body>
</html>
Summarize:
Absolute positioning: the element does not occupy a position relative to the positioning parent box
Fixed positioning: the element does not occupy a position relative to the four corners of the browser Relative positioning
: the element occupies a position relative to the position of the element itself
Static positioning: the default is equivalent to no positioning element placeholder
Positioning level z-index
z-index attribute: The adjustment of the stacking order of the positioning boxes, the larger the value of the z-index attribute. The higher the stacking order may be: positive integer negative integer 0 (default value)
Note:
1. It is only effective for positioning elements;
2. The larger the value, the higher the stacking order;
3. If the value is the same, it will come from behind according to the writing order;
4. A positive value adjusts the level upwards, and a negative value adjusts the level downwards;
5. Attributes Values have no units;
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.box1 {
width: 500px;
height: 150px;
border: 1px solid red;
}
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
position: relative;
top: 50px;
left: 20px;
background-color: yellow;
}
.smallBoxCenter {
border: 1px solid pink;
position: relative;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box1">
<div class="smallBox">
我是smallBox盒子
</div>
<div class="smallBoxCenter">
我是smallBoxCenter盒子
</div>
</div>
</body>
</html>
Give the overridden box a positive z-index attribute
.smallBox {
border: 1px solid blue;
padding: 5px;
width: 50%;
height: 40px;
font-weight: bold;
position: relative;
top: 50px;
left: 20px;
background-color: yellow;
z-index: 1;
}