1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > html 悬浮在固定位置 纯CSS实现DIV悬浮(固定位置)

html 悬浮在固定位置 纯CSS实现DIV悬浮(固定位置)

时间:2024-07-11 11:09:54

相关推荐

html 悬浮在固定位置 纯CSS实现DIV悬浮(固定位置)

【推荐】 Java 开发者跳槽指南.pdf(吐血整理) >>>

纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下:

实现代码:

DIV悬浮示例-纯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;

}

我是右上角悬浮的div我是右下角悬浮的div我是屏幕中间悬浮的div我是左上角悬浮的div我是左下角悬浮的div

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。