当前位置: 萬仟网 > IT编程>网页制作>CSS > 纯CSS实现DIV悬浮的示例代码(固定位置)

纯CSS实现DIV悬浮的示例代码(固定位置)

2021年01月07日  | 萬仟网IT编程  | 我要评论
纯css实现的div悬浮效果(固定位置),兼容常用的浏览器:ie8、360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗等。效果如下:实现代码:<!doctype

纯css实现的div悬浮效果(固定位置),兼容常用的浏览器:ie8、360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗等。效果如下:

实现代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<title>div悬浮示例-纯css实现</title>
<style type="text/css">
/*设置了高度,可以上下滚动*/
body {
height: 1800px;
background:#dddddd;
}

/*div通用样式*/
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;
}

/*右上角*/
div.right_top{
right: 10px;
top: 10px;
}

/*右下角*/
div.right_bottom{
right: 10px;
bottom: 10px;
}

/*屏幕中间*/
div.center_{
right: 45%;
top: 50%;
}

/*左上角*/
div.left_top{
left: 10px;
top: 10px;
}

/*左下角*/
div.left_bottom{
left: 10px;
bottom: 10px;
}
</style>
</head>
<body >
<div class="right_top"> 我是右上角悬浮的div</div>
<div class="right_bottom"> 我是右下角悬浮的div</div>
<div class="center_"> 我是屏幕中间悬浮的div</div>
<div class="left_top"> 我是左上角悬浮的div</div>
<div class="left_bottom"> 我是左下角悬浮的div</div>
</body>
</html>

到此这篇关于纯css实现div悬浮的示例代码(固定位置)的文章就介绍到这了,更多相关css div悬浮内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • 学习笔记—CSS基础

    学习笔记—CSS基础

    CSS的简单使用方法 选择器介绍 常用样式总结 盒子模型介绍 相对定位、绝对定位和固定定位介绍 ... [阅读全文]
  • 力软Web快速开发平台

    力软Web快速开发平台

    力软web快速开发平台是一款全开源的软件平台,为客户提供集管理咨询、软件开发、系统维护为一体的综合性服务。力软web快速开发平台使用了当前最主流开发... [阅读全文]
  • html下利用javascript连数据库

    复制代码 代码如下:<script language="javascript">    &... [阅读全文]
  • CSS3布局之多列布局columns详解

    css3新单位vw、vh、vmin、vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为1... [阅读全文]
  • px妙转rem

    px:像素,相对长度单位,相对于显示器屏幕的分辨率而言(其实我个人认为可以理解为固定单位); rem:这是个web前端中的新成员,是CSS3中新增的... [阅读全文]
  • 有关Vue scoped less 样式编译不通过

    有关Vue scoped less 样式编译不通过

    【遇到问题】 vue中解决样式只作用于当前界面,不影响全局,样式编译报错 【问题来源】 这是我第一次做vue的项目,在开发过程中,我针对样式进行了修... [阅读全文]
  • 纯CSS3实现的阴影效果

    这篇文章主要介绍了纯CSS3实现的阴影效果的方法及示例代码,非常的实用,这里推荐给大家。... 14-12-24 [阅读全文]
  • 页里面 CDATA的作用说明

    必须将 <script> 和 <style> 元素的内容包装到&nb... [阅读全文]
  • HTML CSS整理笔记

    点击链接后退页面: <a href="javascript:history.go(-1)">回到上一个网页</... [阅读全文]
  • 首页下雪效果

    下雪效果,转自网络,快去试试吧 :) 原理 通过多张雪花图片,不同速度的移动,达到下雪的效果。 清晰度: 清晰 模糊 远近: 近 远 HTML CS... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com