CSS让div悬浮

我想让一个div悬浮在浏览器的某个位置,比如离顶部100px处,拉动滚动条向下,这个div还是在这个位置,可以用CSS实现吗?另外float的元素,用jquery的sli... 我想让一个div悬浮在浏览器的某个位置,比如离顶部100px处,拉动滚动条向下,这个div还是在这个位置,可以用CSS实现吗?另外float的元素,用jquery的slideup/down没问题吧?谢谢 展开
 我来答
大野瘦子
高粉答主

2018-12-18 · 繁杂信息太多,你要学会辨别
知道小有建树答主
回答量:1227
采纳率:100%
帮助的人:34.2万
展开全部

.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-百度百科

创作者6HvzfSl22X
2017-10-30 · 知道合伙人互联网行家
创作者6HvzfSl22X
知道合伙人互联网行家
采纳数:39 获赞数:241

向TA提问 私信TA
展开全部
<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
展开全部
rowelch 人家一二楼已经给出很正确的答案了,你还在这里很天真无邪的说Css只能是固定的,Css的门都还没摸着别出来乱误导人。

position: fixed;就是有点ie兼容问题,楼主自己百度下,也有相应的解决办法。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
wqgejin
2011-08-17 · 超过35用户采纳过TA的回答
知道答主
回答量:116
采纳率:0%
帮助的人:75.9万
展开全部
div样式 position: fixed;
margin-left:100px;
margin-top:100px;
定义好div后用js方法来动态修改该div的位置,主要是获取当前窗口的大小来指定div的位置,使相对浏览器位置不变,具体取浏览器窗口大小方法根据不同浏览器使用不同方法(百度,google很容易找到相关代码)。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2011-08-16
展开全部
position: fixed; left:100px; top:100px;

加入以上CSS即可
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式