css：浮层

最新推荐文章于 2025-05-26 20:21:04 发布

原创最新推荐文章于 2025-05-26 20:21:04 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

网页制作-css+html+js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了几种使用CSS实现浮层布局的方法，包括绝对定位、相对定位及居中显示的技巧。通过具体的HTML代码示例，展示了如何精确控制浮层的位置，并保持其在页面中的稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.绝对浮层：

 <div id="floatTips" style="position:absolute;border:solid 1px #777;padding:3px;top:250px;left:500px;width:300px;height:300px;background:#cccccc;color:white;">
 <a href="#" onclick=floatTips.style.display="none">close</a><br>

2.相对位置浮层：

需要父元素的position:relative（父元素的top、left可以为空）

子元素的浮层依然使用position:absolute即可

<div style="position:relative">
<div style="position:absolute;left:10px;right:10px">
11
</div>
</div>

3.浮层相对位置（top、right、left）

4.浮层居中显示：

使用top：50%，left：50%，并向左移动1/2个浮层宽度，向上移动1/2个浮层高度：

<div id="mr_test" style="position:absolute;z-index:999;top:10px;left: 50%;width:300px;height:250px;white-space:nowrap;line-height: 10px;border:0px;padding:0px;margin:0px;background:#cccccc;color:white;margin-left: -150px;top:50%;margin-top: -125px"></div>