CSS position fixed left and right double positioning implementation code
|
CSS Position The position property has five values:
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>
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
Recommend
Solve the problem of docker log mounting
The key is that the local server does not have wr...
How to check PCIe version and speed in Linux
PCIE has four different specifications. Let’s tak...
Implementation of vertical centering with unknown height in CSS
This article mainly introduces the implementation...
Detailed example of MySQL subquery
Subquery Classification Classification by returne...
Detailed explanation of 30 SQL query optimization techniques for MySQL tens of millions of large data
1. To optimize the query, try to avoid full table...
Tutorial on installing phpMyAdmin under Linux centos7
yum install httpd php mariadb-server –y Record so...
Detailed explanation of MySQL partition table
Preface: Partitioning is a table design pattern. ...
Summary of accurate calculations of various distances/scroll distances in a window
Usually in project development, we have to deal wi...
Example statements for indexes and constraints in MySQL
Foreign Keys Query which tables the primary key o...
Detailed explanation of Grid layout and Flex layout of display in CSS3
Gird layout has some similarities with Flex layou...
A brief discussion on three methods of asynchronous replication in MySQL 8.0
In this experiment, we configure MySQL standard a...
Vue large screen data display example
In order to efficiently meet requirements and avo...
Why does MySQL database index choose to use B+ tree?
Before further analyzing why MySQL database index...
Summary of Linux vi command knowledge points and usage
Detailed explanation of Linux vi command The vi e...
How to use Spark and Scala to analyze Apache access logs
Install First you need to install Java and Scala,...