fixed 和 absolute 定位的区别

fixed:固定定位           absolute:绝对定位

在没有滚动条的情况下两者其实没有差异。但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高变化为移动。

一般fixed用在遮盖层和固定在页面某个位置(固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等)。

在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候,也能始终让遮罩盖住整个窗口!!!

测试代码,拖动滚动条看差异

<style>
body {
  height:1000px;/*让窗体出现滚动条*/
}
.fixed {
  position: fixed;
  width: 100px;
  height: 100px;
  right: 0;
  color:blue;
  border: 2px solid blue;

}
.absolute {
  position: absolute;
  width: 100px;
  height: 100px;
  color:red;
  border: 2px solid red;
}
</style>

<div class="fixed">fixed定位</div>
<div class="absolute">absolute定位</div>

滚动前:

滚动后:

时间: 2024-10-07 15:34:34

fixed 和 absolute 定位的区别的相关文章

Css fixed和absolute定位区别

fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 可以这么理解,fixed:固定在当前window不动, absolute:会随参照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单栏,又如弹出提示框居中显示 下面例子可是简单测试两者之间的区别,注意拖动滚动条看差异 <!DOCTYPE html> <

fixed和absolute定位区别

ixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 可以这么理解,fixed:固定在当前window不动, absolute:会随参照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单栏,又如弹出提示框居中显示 下面例子可是简单测试两者之间的区别,注意拖动滚动条看差异 <!DOCTYPE html><ht

Css fixed和absolute定位差别

fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 能够这么理解.fixed:固定在当前window不动, absolute:会随參照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单条,又如弹出提示框居中显示 以下样例但是简单測试两者之间的差别,注意拖动滚动栏看差异 <!DOCTYPE html> &

position:relative/static/fixed/absolute定位的区别以及使用场景

absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变.absolute的元素不仅位置改变了,同时也脱离了文档流.所以absolute会把非定位盒子覆盖掉. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子

关于移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).height() < win_h){ $('#footer').hide(); }else{ $('#footer').show(); } }); 原文地址:https://www.cnblogs.com/mmy67/p/10310734.html

移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).height() < win_h){ $('.share-btn-box').hide(); }else{ $('.share-btn-box').show(); } }); 原文地址:https://www.cnblogs.com/ivan5277/p/11247314.html

Position属性四个值:static、fixed、absolute和relative的区别和用法

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

fixed定位与absolute定位

相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对后,就具有了偏移属性和堆叠属性Z-index,属性值越大,越靠上 不同点: fixed定位: 设置偏移量后:无论有无已经定位的祖先元素,都相对于浏览器窗口进行偏移 未设置偏移量:以其父元素为基准定位,会继续包含在父包含块中. 表现形式:位置固定,不会随滚动条变化:被他遮盖的元素,可以从其下穿过. a

Position属性四个值:static、fixed、absolute和relative的区别和用法(转自博友 Newbie_小白)

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