怎么样固定定位不相对于浏览器

如何让position fixed不再基于浏览器窗口定位

position:fixed默认是相对浏览器定位的. 就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: MDN对position: fixed有一个注释: 当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先. 也就是说如果想让fixed不相对浏览器定位,只要给它的随便哪个祖先设上非none的transform,问题就解决了.这祖先可以是static的,也就是说随便哪个祖先都行.比如说给body设一个transform: translateZ(0);,

HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)

BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上向下堆放,行内元素从左往右地堆放,这就是一个标准的流程.(inline-block也属于常规流,暂且把它当作inline) 而浮动和绝对定位是脱离了常规流,改从左往右排,打破次元,从二维表面升起来了,跑到原来位置的上空了.(其实是别的元素在按照标准流布局时会忽略脱离标准流的元素,说浮起来并不准确,但

WEB学习 -相对定位、绝对定位、固定定位、z-index

相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用途相对定位有坑,所以一般不用于做“压盖”效果.页面中,效果极小.就两个作用: 1) 微调元素 2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说) .相对定位的定位值可以用left.right来描述盒子右.左的移动: 可以用top.bottom来描述盒子的下.上的移动. 绝对定位 . 绝对定位

HTML四种定位-固定定位

固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="wi

IE6浏览器不支持固定定位（position：fixed）解决方案

代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> </head> <body> <div style="width

IE6浏览器不支持固定定位（position：fixed）解决方案(转)

IE6浏览器不支持固定定位(position:fixed)解决方案来源:互联网作者:佚名时间:12-04 10:54:05 [大中小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器不支持固定定位(position:fixed),本文将详细介绍此问题的解决方法,需要了解的朋友可以参考下今天在学习的时候,突然发现在IE6浏览器下,position:fixed不管用了: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

理解CSS相对定位和固定定位

× 目录 [1]相对定位 [2]固定定位前面的话一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识相对定位定义可能理解起来最简单的定位机制就是相对定位了.采用这种机制时,通过使用偏移属性移动定位元素.当元素相对定位时,它会从其正常位置移走,不过,原来所占的空间并不会因此消失.相对定位元素,会为其

position之fixed固定定位、absolute绝对定位和relative相对定位

什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网页上局部使用层布局还是有其方便之处的.下面我们来学习一下html中的层布局. 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)属性来支持层布局模型. 层模型有三种形式: 1.绝对定位(posi

Bootstrap 固定定位（Affix）

来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定固定定位--声明式触发固定定位 Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:dat

实现 DIV 固定定位在网页主体部分最右侧

position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适应随着窗口大小变化,除了主体部分,其他部分都是留白处理.如下图所示: 要实现这个需求有两个解决办法: 1.css 中的固定定位思路 ① 给这个 div (div 一定要在主体部分 div 里面)加一个父级 DIV; ② 设置父级 DIV 的样式:宽设置为 inherit,高等于 div 的高.pos

【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网页上局部使用层布局还是有其方便之处的.下面我们来学习一下html中的层布局. 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)属性来支持层布局模型. 层模型有三种形式: 1.绝对定位(posi

层模型--固定定位(position:fixed)

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同. 以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px.并且拖动滚动条时位置固定不变. <!

IE6解决固定定位代码

有些朋友在进行网页布局时,会遇到IE6浏览器不支持固定定位的兼容性问题,本博将详细介绍此问题的解决方法,需要了解的朋友可以参考下. ie6 垂直居中固定定位,代码如下: #center {_position:absolute;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement

Bootstrap_Javascript_固定定位

Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom. data-offset-top 用来设置元素距离顶部的距离.比如 90,表示元素距离顶部 90px,当用户从顶部向下拖

ie6与固定定位fixed,+ 条件注释格式注意

ie6并不支持position:fixed, ie7+都支持fixed定位, ie6固定定位实现方法1: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .top{ width:100px; height:100px; background:#ff8; border:1px solid #555; position:fixed; bottom:0;

CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动.浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象. 1.1.2 大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了.所有浮动的标签不会去区分行内标签和块

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边

CSS学习笔记10 相对定位，绝对定位与固定定位

文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置. position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.(忽略 top, bottom, left, right 或者 z-index 声明). relat

前端学习 -- Html&Css -- 相对定位绝对定位固定定位

相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: relative:开启元素的相对定位: absolute:开启元素的绝对定位: fixed:开启元素的固定定位(也是绝对定位的一种). 当元素的position属性设置为relative时,则开启了元素的相对定位当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化: 相对定位是相对于元素在文

前端CSS - 相对定位,绝对定位,固定定位

前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位了 position:relative; → 必须先声明,自己要相对定位了, left:100px; → 然后进行调整. top:150px; → 然后进行调整. 1.2 相对定位的特性 - 不脱标,老家留坑,形影分离相对定位不脱标,真实位置是在老家,只不过影子出去

固定定位 z-index iconfont的使用 043

固定定位现象脱标提升层级将盒子固定住参考点浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/reset.css"> <

怎么样固定定位不相对于浏览器

热门专题