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

Detailed tutorial on how to monitor Nginx/Tomcat/MySQL using Zabbix

Sample code for implementing DIV suspension with pure CSS (fixed position)

Detailed tutorial on how to monitor Nginx/Tomcat/MySQL using Zabbix

Vue implements simple calculator function

Solve the problem of OpenLayers 3 loading vector map source

Detailed explanation of the use of default in MySQL

Simply understand the differences in the principles of common SQL delete statements

Examples of optimistic locking and pessimistic locking in MySQL

MySQL case when group by example

Summary of several error logs about MySQL MHA setup and switching

Use of Linux bzip2 command

Super detailed steps to install zabbix3.0 on centos7

Recommend

MySQL Router implements MySQL read-write separation

Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

Use of Linux ipcs command

Detailed steps to install Hadoop cluster under Linux

Mini Program to implement Token generation and verification

Mysql implements regular clearing of old data in a table and retaining several pieces of data (recommended)

How to build pptpd service in Alibaba Cloud Ubuntu 16.04

Detailed explanation of how to restore database data through MySQL binary log

Create a screen recording function with JS

Implementing login page based on layui

Detailed explanation of Nginx's connection limit configuration for IP addresses in a network segment

Mysql NULL caused the pit

Vue implements an example of pulling down and scrolling to load data

Solve the problem that document.getElementBy series methods cannot obtain objects

Detailed explanation of computed properties in Vue