absolute和fixed

2024-08-27

fixed 和 absolute 定位的区别

fixed:固定定位 absolute:绝对定位在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高变化为移动. 一般fixed用在遮盖层和固定在页面某个位置(固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等). 在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候,也能始终让遮罩盖住整个窗口!!! 测试代码,拖动滚动条看差异 <style> body { heig

position:absolute/relative/fixed小结

1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位.当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏. 2.相对定位:positio

[转]关于position 的 static、relative、absolute、fixed、inherit

本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static. relative 没有脱离布局流,此时可以使用 top.right.bottom.left 属性. top 和 bottom 共存时,使用 top 值,忽略 bott

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层

absolute vs fixed

<!DOCTYPE html> <html> <head> <title>absolute和fixed的区别</title> <style type="text/css"> body{color:#fff;} #html{ position:relative;width:778px; height:1000px; border:1px solid #0000FF;} #fixed,#absolute{width:2

CSS+DIV定位分析(relative,absolute,static,fixed)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 1.官方定义先看下各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位的元素,通过top,bottom,left,right的设

position 有五个值：static、relative、absolute、fixed、inherit。

position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static. relative 没有脱离布局流,此时可以使用 top.right.bottom.left 属性. top 和 bottom 共存时,使用 top 值,忽略 bottom 值: left 和 right 共存时,使用 left 值,忽略 right 值

position的absolute与fixed，absolute与relative共同点与不同点

absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上不同点: absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口. 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的. absolute与relative 不同点: absolute的没有设position的父级元素就参照浏览器左上角. relative参照父级元素原始点,无父级参

[转]Html position（static、relative、absolute、fixed）

转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性.<div id="parent"> <div id="sub1">sub1</id> <div id="sub2">s

CSS中Position属性static、absolute、fixed、relative

在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relative. ◆position:static 无定位元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. 该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影

前端~定位属性position（relative、absolute、fixed）的分析

前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物) absolute: 随参照物的变化而变化 fixed:固定 2,position 是否会被内部的子元素继承? 会,一般不能继承的属性,像盒模型,border.margin.padding等注意事项:当使用了滚动组件(例如better-scroll)时,跟better

absolute和fixed

热门专题