关于HTML做悬浮窗口

关于HTML做悬浮窗口,第1张

楼上的解答基本正确咯

你可以使用css来浮动一个块,建议为浮动div,相关的关键样式为position: fixed,是指布局方式为固定的,为了防止被遮挡一般要搭配z-index:999或者更大的数字,表示该层高度,默认为1。如果一个元素的z-index小于其他元素且位置冲突的话就会被遮挡咯。

然后就是位置的问题,这个可以自行调整啦。

问题分析:

HTML中的浮动窗口,可以使用CSS的定位方式完成,同时使用这种方式来完成这个功能也是一种较为简单的方式,只需要有HTML以及CSS的知识就可以完成了。

举例如下:

在以下示例中,将演示页面左右两侧分别放置一个高度为500像素,宽度为200像素的浮动窗口。示例中使用的定位方式为:固定定位(fixed),所有它们将永远的跟随页面进行滚动。

HTML代码:

<div id="left">

    <p>我是左侧浮动窗口的内容</p>

</div>

<div id="right">

    <p>我是右侧浮动窗口的内容</p>

</div>

CSS代码:

body{

    /*

     * 为body标签设置背景仅仅是为了演示效果。

     * 与浮动窗口本身无关。

     */

    background-color: #ccc

}

#left, #right{

    position: fixed

    top: 100px

    width: 200px

    height: 500px

    line-height: 500px

    text-align: center

    border: 1px solid #000

    background-color: #FFF

}

#left{

    left: 50px

}

#right{

    right: 50px

}

页面初始化效果:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6295983.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表(0条)

保存