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
How to export and import .sql files under Linux command
This article describes how to export and import ....
How to prohibit vsftpd users from logging in through ssh
Preface vsftp is an easy-to-use and secure ftp se...
MySQL slow_log table cannot be modified to innodb engine detailed explanation
background Getting the slow query log from mysql....
Vue network request scheme native network request and js network request library
1. Native network request 1. XMLHttpRequest (w3c ...
MySQL 5.7.17 installation and configuration method graphic tutorial (windows10)
MySQL 5.7.17 installation and configuration metho...
How to solve the problem of not getting form value after submitting html form input using disabled
After the form input box input is set to the disa...
About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)
Database application is an indispensable part of ...
JS+AJAX realizes the linkage of province, city and district drop-down lists
This article shares the specific code of JS+AJAX ...
Summary of flex layout compatibility issues
1. W3C versions of flex 2009 version Flag: displa...
Vue implements adding, displaying and deleting multiple images
This article shares the specific code for Vue to ...
How to configure MySQL scheduled tasks (EVENT events) in detail
Table of contents 1. What is an event? 2. Enable ...
A collection of button hover border and background animations based on CSS properties
Heart Attributes opacity: .999 creates a stacking...
Solve the problem of OpenLayers 3 loading vector map source
1. Vector Map Vector graphics use straight lines ...
Nginx reverse proxy configuration removes prefix
When using nginx as a reverse proxy, you can simp...
CSS sample code to achieve circular gradient progress bar effect
Implementation ideas The outermost is a big circl...