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

我发现原来做前端真的是需要创意的。前几天看到别人用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 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

HTML表格

            4.cellspacing:外边距(单元格和单元格之间的距离)

1002
来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

1104
来自专栏河湾欢儿的专栏

伪元素

:first-letter 伪元素的样式将应用于元素文本的第一个字(母)。 :first-line 伪元素的样式将应用于元素文本的第一行。 :befor...

753
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3338
来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

723
来自专栏柠檬先生

jquery mobile 移动web(2)

button 按钮   data-role="button" 将超链接变成button。   具有icon 图标的button 组件...

1945
来自专栏菜鸟计划

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

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

3656
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

17710
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现手机上常见的ListMenuView

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

694
来自专栏河湾欢儿的专栏

表格

表格标签: table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元

651

扫码关注云+社区