Pure CSS to achieve div suspension example code (fixed location)

Time:2021-11-26

Div suspension effect (fixed position) realized by pure CSS is compatible with common browsers: IE8, 360, Firefox, chrome, Safari, opera, Aoyou, Sogou, window of the world, etc. The effects are 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 to 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 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'm the div suspended in the upper right corner < / div >
< div class = "right_bottom" > I am the div suspended in the lower right corner < / div >
< div class = "center" > I am a div suspended in the middle of the screen < / div >
< div class = "left_top" > I'm 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 is the end of this article about the sample code (fixed location) of pure CSS to realize div suspension. For more relevant CSS div suspension content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Vue、Three. JS implementation panorama

1、 First, we need to create a Vue project This paper mainly records the process of building panorama in detail, so building Vue project is not described too much. 2、 Install three js npm install three –save npm install three-trackballcontrols –save npm install three-orbit-controls –save npm i three-obj-mtl-loader –save npm i three-fbx-loader –save npm i […]