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

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

MySQL DATE_ADD and ADDDATE functions add a specified time interval to a date

MySQL DATE_ADD(date,INTERVAL expr type) and ADDDA...

How to use CSS attribute selectors to splice HTML DNA

CSS attribute selectors are amazing. They can hel...

Docker installation Nginx tutorial implementation illustration

Let’s install Nginx and try it out. Please note t...

Detailed explanation of the use of MySQL select cache mechanism

MySQL Query Cache is on by default. To some exten...

MySQL aggregate function sorting

Table of contents MySQL result sorting - Aggregat...

A brief analysis of the count tracking of a request in nginx

First, let me explain the application method. The...

Vue implements div wheel zooming in and out

Implement div wheel zooming in and out in Vue pro...

Markup validation for doctype

But recently I found that using this method will c...

Vue implements multiple selections in the bottom pop-up window

This article example shares the specific code of ...

Implementation of React page turner (including front and back ends)

Table of contents front end According to the abov...

CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

Every time I design a web page or a form, I am tr...

Practical MySQL + PostgreSQL batch insert update insertOrUpdate

Table of contents 1. Baidu Encyclopedia 1. MySQL ...

WeChat applet implements search box function

This article example shares the specific code for...

Summary of MySQL InnoDB architecture

Table of contents introduction 1. Overall archite...

CSS fills the parent container div with img images and adapts to the container size

When multiple images are introduced into a page, ...