前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一个跨浏览器固定定位的方法。

分享一个跨浏览器固定定位的方法。

作者头像
练小习
发布2017-12-29 11:51:24
5370
发布2017-12-29 11:51:24
举报
文章被收录于专栏:练小习的专栏练小习的专栏

我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。

其实很简单,就是我一直都没想到,元素相对HTML绝对定位,然后用BODY做页面容器。

先看看效果吧呵呵。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">

<head>

<title>跨浏览器固定定位</title>

<style type="text/css">

*{margin:0;padding:0;}

html{_overflow:hidden;}

body{_height:100%; _overflow-y:auto;}

#box{width:100px; height:100px;background-color:black;position:fixed;_position:absolute; top:100px; left:100px;}

</style>

</head>

<body>

<div>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内1111容<br>

</div>

<div id="box"></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档