ie自带css定位,CSS实现元素相对于浏览器窗口进行定位

文章简介：css实现相对浏览器窗口定位彻底研究.

Web Developer / Designer 经常需要将一个元素“固定”在页面的某个位置。例如弹出窗口、漂浮广告位等……本文将详细介绍简单CSS实现元素相对于浏览器窗口进行定位的方法。

position:fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

良好支持 W3C 标准的浏览器实例

在 IE9、Firefox、Chrome等良好支持 W3C 标准的浏览器中，如果我们希望将某元素绝对定位于窗口正中间，我们可以给它指派这样的 CSS样式：

width:336px; height:280px; left:50%; top:50%; margin-left:-168px; margin-top:-140px; position:fixed;

这里 margin-left 、margin-top 的值应该修改为您页面主要区域宽度和高度的一半。

修正IE版本<7不支持position:fixed的bug

IE版本<7的浏览器不支持position:fixed属性，所以并未实现期望的效果，这时就要针对IE<7的浏览器写单独的样式。

(1)利用 JavaScript 计算出需要的 top 值

在head中插入：

在style.css样式表中针对目标定位元素样式中写入：

position

ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css相关推荐

让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件使用单页导航
插件下载地址 stickUp:点击打开链接 jQuery.pin:点击打开链接 stickUp 的使用 One Page Nav一个轻量级的jQuery的网站单页平滑滚动导航插件,One Page N ...
【css】CSS position(定位)属性
一.CSS position(定位)属性 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t ...
Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）
一.CSS 定位定位的作用普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...
CSS 定位布局 - 相对、绝对、固定三种定位
仅供学习,转载请注明出处文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的 ...
网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
巧用伪元素解决fixed元素被百度浏览器屏蔽问题
背景在做这样一个活动页时,发现底部fixed定位的 button 元素在百度浏览器中展示不出来. Google后发现了这位小伙伴的文章针对前端在百度浏览器总的固定定位的问题文中提到: 这是百度浏 ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
html 图片元素的坐标定位,CSS的定位
CSS的定位 1. 定位的必要性浮动可以让多个块级盒子一行没有缝隙地排列显示,经常用于横向排列盒子定位则是可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置,并且可以压住其它盒子 2. ...
css元素定位：通过元素的标签或者元素的id、class属性定位
前言大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求.xpath元素定位方式更直观,更好理解一些. css元素定位方式往往被忽略 ...

ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css

ie自带css定位,CSS实现元素相对于浏览器窗口进行定位_css相关推荐

最新文章

热门文章