Sample code for implementing DIV suspension with pure CSS (fixed position)
|
The DIV floating effect (fixed position) is implemented purely with CSS, and is compatible with commonly used browsers: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, The World, etc. The effect is as follows:
Implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>DIV suspension example - pure CSS implementation</title>
<style type="text/css">
/*Set the height, you can scroll up and down*/
body {
height: 1800px;
background:#dddddd;
}
/*div general style*/
div{
background: #1a59b7;
color:#ffffff;
overflow: hidden;
z-index: 9999;
position: fixed;
padding:5px;
text-align:center;
width: 175px;
height: 22px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/*upper right corner*/
div.right_top{
right: 10px;
top: 10px;
}
/*lower right corner*/
div.right_bottom{
right: 10px;
bottom: 10px;
}
/*Middle of the screen*/
div.center_{
right: 45%;
top: 50%;
}
/*upper left corner*/
div.left_top{
left: 10px;
top: 10px;
}
/*lower left corner*/
div.left_bottom{
left: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="right_top"> I am the div floating in the upper right corner</div>
<div class="right_bottom"> I am the div floating in the lower right corner</div>
<div class="center_"> I am the div floating in the middle of the screen</div>
<div class="left_top"> I am the div suspended in the upper left corner</div>
<div class="left_bottom"> I am the div suspended in the lower left corner</div>
</body>
</html>
This concludes this article about sample code for implementing DIV suspension with pure CSS (fixed position). For more relevant CSS DIV suspension content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Two ways to clear float in HTML
>>: JavaScript destructuring assignment detailed explanation
Recommend
Detailed explanation of the actual process of master-slave synchronization of MySQL database
Table of contents Installation Environment Descri...
In-depth understanding of Vue dynamic components and asynchronous components
1. Dynamic Components <!DOCTYPE html> <h...
MySQL 8.0.20 installation tutorial and detailed tutorial on installation issues
Original address: https://blog.csdn.net/m0_465798...
Summary of Linux file basic attributes knowledge points
The Linux system is a typical multi-user system. ...
JavaScript ES6 Module Detailed Explanation
Table of contents 0. What is Module 1.Module load...
About the role of meta in HTML (collected and sorted from the Internet)
W3Cschool explains it this way The <meta> el...
Should I use distinct or group by to remove duplicates in MySQL?
Preface About the performance comparison between ...
Standard summary for analyzing the performance of a SQL statement
This article will introduce how to use explain to...
Detailed explanation of the principles and implementation methods of Mysql account management
This article uses examples to illustrate the prin...
Detailed explanation of how to quickly build a blog website using Docker
Table of contents 1. Preparation 2. Deployment Pr...
How to install redis in docker and set password and connect
Redis is a distributed cache service. Caching is ...
Example code for implementing a hollow mask layer with CSS
Contents of this article: Page hollow mask layer,...
MySQL master-slave synchronization mechanism and synchronization delay problem tracking process
Preface As a DBA, you will often encounter some M...
Nginx uses reverse proxy to implement load balancing process analysis
Introduction Based on docker container and docker...
How to set Nginx to forward the domain name to the specified port
Enter /usr/local/nginx/conf sudo cd /usr/local/ng...