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

我发现原来做前端真的是需要创意的。前几天看到别人用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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

删除 WordPress 导航菜单的多余 CSS 选择器(id或class)

在默认情况下,WordPress 的导航菜单会输出很多如menu-item、menu-item-type-taxonomy、menu-item-object-c...

1828
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

先说结论:通过调用事件名的方式和 bind 的方式只能绑定之前存在的元素,后添加的元素不能绑定事件;而 delegate 和 on 的方式绑定元素的方式可以。

814
来自专栏marsggbo

li浮动时ul高度为0,解决ul自适应高度的几种方法

内容提要:   li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中...

2007
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

先说结论:通过调用事件名的方式和 bind 的方式只能绑定之前存在的元素,后添加的元素不能绑定事件;而 delegate 和 on 的方式绑定元素的方式可以。

552
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3436
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3456
来自专栏极乐技术社区

wxss学习《四》字体,组件及API的思维导图

一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, o...

18610
来自专栏性能与架构

微信小程序示例 - 视图容器

滑块视图容器 swiper ? 代码结构 <swiper> <swiper-item> <image src="{{item}}"/> ...

3148
来自专栏一个小程序员的成长笔记

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html la...

4547
来自专栏十月梦想

文本阴影和边框阴影

    box-shadow:left top 模糊距离 阴影尺寸 阴影颜色 inset(内阴影);

802

扫码关注云+社区