1, What is the positioning layout?
Using position, left, right, top and bottom, you can change the existing position of an element, for example, make the element jump out of the normal layout flow and fix it at a certain position on the page.
2, Usage scenario
1,position: static
This is the default value of the element, which means that the elements are arranged according to the normal layout flow (browser default display). At this time, the top, right, bottom, left and z-index properties are invalid.
2,position: relative
The element will not be moved out of the normal document flow and the original area will be left blank. New file index HTML and copy it to the file below, and open index.html with your browser HTML to see the effect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Relative positioning</title>
<style>
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
/* static Equivalent to normal layout flow arrangement */
position: relative;
background: yellow;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<h1>Relative positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child
content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>3,position: absolute
Based on the offset of the nearest non static ancestor element, the element will be moved out of the normal document stream, but there will be no blank. Absolutely positioned elements can set margins and will not be merged with other margins. New file index HTML and copy it to the file below, and open index.html with your browser HTML to see the effect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Absolute positioning</title>
<style>
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
/* static Equivalent to normal layout flow arrangement */
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<h1>Absolute positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child
content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>4,position: fixed
Using the page as the coordinate to offset, the element will be moved out of the normal document flow, but there will be no blank. The position of the element does not change when the page scrolls. The navigation menu can be located with fixed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed positioning</title>
<style>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin-top: 0;
background: white;
padding: 10px;
}
p:nth-of-type(1) {
margin-top: 60px;
}
</style>
</head>
<body>
<h1>Fixed positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the
<code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins,
not both.</p>
</body>
</html>5,position: sticky
Based on the most recent scrolling ancestor, the element will not be moved out of the normal document flow and will not affect other elements. The element can move normally, but when it reaches the specified position, it is fixed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky positioning</title>
<style>
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
dt {
background-color: black;
color: white;
padding: 10px;
position: sticky;
top: 0;
left: 0;
margin: 1em 0;
}
</style>
</head>
<body>
<h1>Sticky positioning</h1>
<dl>
<dt>A</dt>
<dd>Apple</dd>
<dd>Ant</dd>
<dd>Altimeter</dd>
<dd>Airplane</dd>
<dt>B</dt>
<dd>Bird</dd>
<dd>Buzzard</dd>
<dd>Bee</dd>
<dd>Banana</dd>
<dd>Beanstalk</dd>
<dt>C</dt>
<dd>Calculator</dd>
<dd>Cane</dd>
<dd>Camera</dd>
<dd>Camel</dd>
<dt>D</dt>
<dd>Duck</dd>
<dd>Dime</dd>
<dd>Dipstick</dd>
<dd>Drone</dd>
<dt>E</dt>
<dd>Egg</dd>
<dd>Elephant</dd>
<dd>Egret</dd>
</dl>
</body>
</html>6,relative + absolute
If the parent element has position: relative; set;, position: absolute; is set for the child element, Then the child element is offset by its position relative to the parent element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Positioning context</title>
<style>
body {
width: 500px;
margin: 0 auto;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<h1>Positioning context</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the
<code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>7,z-index
When multiple elements are displayed at the same position, the z-index attribute can be used to determine which element is at the top. The one with the largest z-index value is displayed at the top. Try to modify the value of z-index below to see the effect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
body {
width: 500px;
margin: 0 auto;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
z-index: 1;
}
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
z-index: 2;
}
</style>
</head>
<body>
<h1>z-index</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">Now I'm absolutely positioned relative to the <code><body></code> element, not the
<code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
</body>
</html>