CSS position fixed left and right double positioning implementation code

CSS Position
The position attribute specifies the positioning type of an element.

The position property has five values:

static
relative
fixed
absolute
sticky

Elements can be positioned using the top, bottom, left and right properties. However, these properties will not work unless the position property is set first. They also work differently, depending on the positioning method.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 1400px;
				height: 1500px;
				margin: 0 auto;
			}
			.box1{
				border: 1px solid #000000;
				height: 200px;
				width: 200px;
			    display: inline-block;
				position: fixed;
		
			}
			.box02{
				    border: 1px solid #006400;
				    height: 1500px;
				    width: 800px;
				    display: inline-block;
				    margin: 0 20px;
				    margin-left: 250px;
			}
			.box03{
				border: 1px solid #006400;
				height: 200px;
				width: 200px;
				display: inline-block;
			    position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">123</div>
			<div class="box02">456</div>
			<div class="box03">789</div>
		</div>
	</body>
</html>

insert image description here

This is the end of this article about the implementation code of CSS position fixed left and right double positioning. For more relevant CSS position fixed positioning content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to prevent Vue from flashing in small projects

>>: Implementation code of front-end HTML skin changing function