CSS让div悬浮
.tl {
width: 240px;
height: 193px;
position: absolute;/*这里一定要设置*/
z-index: 999999;/*这里是该元素与显示屏的距离,据说越大越好,因为没有它也是可以的*/
margin-top: 20%;
margin-left: -209px;
background-image :url("/ship_three/images/tl.png");
-webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
-moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/
-o-transition: .5s ease-in-out;
background-image: url("/ship_three/images/tl.png");
}
可以,没问题CSS代码就是上面的。
扩展资料:
div中style使用css代码
div中可以直接写CSS样式代码,只需要DIV代码(标签)中使用style属性即可直接写CSS样式。
DIV代码:
<div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div>
完整案例代码与效果截图:
完整HTML案例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV直接写CSS DIVCSS5案例</title>
</head>
<body>
<div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div>
</body>
</html>
div标签内常用属性列表
1、style 设置css样式(扩展了解style标签)
2、align 设置div盒子内的内容居中、居左、居右
3、id 引人外部对应#(井号)选择符号样式
4、class 引人外部对应.(句号)选择符号样式
5、title 设置div(标题)鼠标经过时显示文字(扩展了解 title标签)
参考资料来源:DIV-百度百科
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
function menuFixed(id){
var obj = document.getElementById(id);
var objHeight = obj.offsetTop;
window.onscroll = function(){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < objHeight){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}
}
</script>
#nav {
padding: 10px;
position: relative;
top: 0;
background: #375069;
width: 1000px;
}
#nav a {
display:inline-block;
margin:0 10px;
*display:inline;
color:white;
width: 15%;
}
看看这个能不能帮你找到一个对比的灵感
2011-08-17
position: fixed;就是有点ie兼容问题,楼主自己百度下,也有相应的解决办法。
margin-left:100px;
margin-top:100px;
定义好div后用js方法来动态修改该div的位置,主要是获取当前窗口的大小来指定div的位置,使相对浏览器位置不变,具体取浏览器窗口大小方法根据不同浏览器使用不同方法(百度,google很容易找到相关代码)。
2011-08-16
加入以上CSS即可