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" alt="">
Css fixed和absolute定位差别的更多相关文章
- fixed 和 absolute 定位的区别
fixed:固定定位 absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...
- 移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题
var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...
- 关于移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题
var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- css position static | absolute | fixed | relative
<div id="bigbox1"> <div id="box1" class="box">box1</ ...
- css中postion的fixed与absolute区别详解
fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...
- fixed定位与absolute定位
相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...
- CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
随机推荐
- java中TCP传输协议
class TcpClient { public static void main(String[] args) throws Exception { //创建client的socket服务,指定目的 ...
- servlet学习(1)
1.Servlet是sun公司提供的一门用于开发动态web资源的技术. 2.Servlet在web应用的位置: 3.创建Servlet的三种方式: (1)实现servlet的接口 (2)继承Gener ...
- jquery12 queue() : 队列方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Python 面向对象与 C++、Java 的异同
1. 子类是否自动调用父类的构造方法 C++.Java 会在子类对象的构造中自动首先调用父类的构造: Python 则相对啰嗦一点: 如果子类不覆盖父类的__init__()方法,则子类默认将执行与父 ...
- #学习笔记#——JavaScript 数组部分编程（五）
11.为数组 arr 中的每个元素求二次方.不要直接修改数组 arr,结果返回新的数组 function square(arr) { var resultArr=new Array(); for(va ...
- 错误日志写入到本地磁盘（lock 队列）
今天照常在b站上看看编程:看到有讲错误日志处理的,自己没写过日志,就看看了看: 主要是在讲的时候牵扯到了队列和lock的知识点:这方面知识自己了解的更少,那就记录一下.
- Kinect 开发 —— 常见手势识别（下）
划动(Swipe) 划动手势和挥手(wave)手势类似.识别划动手势需要不断的跟踪用户手部运动,并保持当前手的位置之前的手的位置.因为手势有一个速度阈值,我们需要追踪手运动的时间以及在三维空间中的坐标 ...
- 【2017 Multi-University Training Contest - Team 3】RXD's date
[Link]: [Description] [Solution] [NumberOf WA] 1 [Reviw] [Code] #include <bits/stdc++.h> using ...
- FZU 1921 栀子花开
栀子花开 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: 19216 ...
- 比较s+=4;和s=s+4;的不同
1.s=s+4: public class Test { public static void main(String[] args){ short s=3; // s=s+4; //描述 资源 路径 ...