关于CSS的fixed定位

经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变，就例如经常看到的弹出广告。方法一般是使用js控制，或者使用css。这里我写的是css的控制方法。css属性"position:fixed"，它的作用就是将元素相对于窗口固定位置。

目的:导航放在底端,不管a的框架高度如何,b始终是在底端.

调试环境:IE7,IE8.

结果:达到预期目的.

测试代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">#a{margin:0 auto;height:700px;width:960px;;color:#fff;background:#000000;/*overflow:hidden;*/}
#b{position:fixed;margin:0 auto;height:60px;width:100%;bottom:0px;/*定义区块距离网页顶部100px*/left:0px;right:0px;background:red;/*overflow:hidden;*/}</style>
<div id="a"></div>
<div id="b"></div>

转载于:https://www.cnblogs.com/ewblgo/archive/2012/06/02/2531726.html

关于CSS的fixed定位相关推荐

CSS position:fixed定位时 “高度坍塌” 问题的解决
这问题两种方法: 1.给第二个模块div设置margin-top的值,margin-top的值设为大于等于固定定位模块的高度 2.这个方法是百度百科手机页面用的,先为固定定位元素设一个父元素,不设高度 ...
CSS transform 使 fixed 定位失效？
CSS transform 使 fixed 定位失效? 1. 最终实现效果如下看似简单的一个动画,却出现了种种bug,也不叫bug,毕竟是W3C官方的嘛,整整耗费了我一下午的时间去搞它. 2. 布局 ...
ios fixed定位后内容不显示_记录CSS中 position:fixed 踩的坑
在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件. posit ...
CSS fixed 定位元素失效的问题
一个示例考察下面的代码: <head><title>css filter issue</title><style> body { height: 20 ...
ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法...
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
【CSS3】CSS中的定位
一.css定位 CSS position 属性值: absolute:生成绝对定位的元素,脱离文档流,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left&quo ...
基于Fixed定位的框选功能
最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发.在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的.但是现实需求里几 ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
fixed 定位苹果手机输入框触发时内容全部隐藏
问题出现在东钿微信公众号用户注册页面页面中只有两个输入框页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...
十分钟轻松搞懂CSS的五大定位方式！（建议收藏）
文章目录一.CSS之position定位方式 1.static 2.relative 3.absolute(脱离正常文档流) 4.fixed(脱离正常文档流) 5.sticky 二.z-index ...

关于CSS的fixed定位

关于CSS的fixed定位相关推荐

最新文章

热门文章