Css fixed和absolute定位差别

fixed:固定定位

absolute:绝对定位

差别非常easy:

1、没有滚动栏的情况下没有差异

2、在有滚动栏的情况下。fixed定位不会随滚动栏移动而移动。而absolute则会随滚动栏移动

能够这么理解。fixed:固定在当前window不动, absolute:会随參照对象元素的高度和宽度变化而变化

一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单条,又如弹出提示框居中显示

以下样例但是简单測试两者之间的差别,注意拖动滚动栏看差异

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<style>

body {

height:1000px;/*让窗口出现滚动栏*/

}

.fixed {

position: fixed;

left: 100px;

right: 100px;

top: 100px;

bottom: 100px;

width: auto;

height: auto;

border: 1px solid blue;

}

.absolute {

position: absolute;

left: 100px;

right: 100px;

top: 100px;

bottom: 100px;

width: auto;

height: auto;

border: 1px solid red;

}

</style>

</head>

<body>

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

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

</body>

</html>

效果例如以下:当滚动栏下拉时,absolute层会上移。fixed层不动

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

时间: 2025-01-02 17:12:11

Css fixed和absolute定位差别的相关文章

Css fixed和absolute定位区别

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

fixed 和 absolute 定位的区别

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

fixed和absolute定位区别

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

关于移动端的文本框获取焦点时导致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

CSS position relative absolute fixed

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的

fixed定位与absolute定位

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

css position: relative | absolute | static | fixed详解

static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位) 这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index进行层次分级. CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外边距( margin )

CSS position的absolute和relative的解析[转]

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,