固定定位【"position:fixed"】

定义：

固定定位是元素是相对于窗口（视口）定位的，也就是说即使滚动页面他也始终位于同一个位置

通俗来讲就是固定的元素不会随着滚动条的拖动而改变位置（在视野中，固定定位的元素位置不会改变的）

应用场景：

最常见的就是吸顶盒、底部通栏

其次还有：全屏黑色半透明遮罩弹出层、弹出注册和登录框、楼梯式导航（美团）、浏览器右侧菜单、左上固定自适应后台管理系统布局

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 1500px;}header {width: 100%;background-color: #FFC0CB;position: fixed;top: 0;}</style>
</head>
<body><header><h1>Tab</h1></header><br><br><br><br><br><br><br><div>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div></body>
</html>

绝对定位【position:absolute】

定义：

相对于最近的祖先元素进行定位。

如果绝对定位的元素没有祖先，他将使用文档的主体也就是body,并随着页面滚动一起滚动

注意：父级有定位则看父级，父级没有定位继续向上找父级，实在找不到的话，就浏览器对齐

无父盒子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*消除浏览器内外边距*/* {margin: 0;padding: 0;}.alone {width: 300px;height: 300px;background-color: blueviolet;/* 绝对定位：距离顶部100px，距离左边100px */position: absolute;top: 100px;left: 100px;}</style>
</head><body><div class="alone"></div>
</body></html>

有父级盒子（父级无相对）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.father{width:500px;height: 500px;margin-top: 150px;margin-left: 150px;background-color: beige;}.alone {width: 300px;height: 300px;background-color: blueviolet;/* 绝对定位：距离顶部0px，距离右边0px */position: absolute;top: 100px;left: 100px;}</style>
</head><body><div class="father"><div class="alone"></div></div>
</body></html>

有父盒子（父级有相对）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.father{position: relative;width:500px;height: 500px;margin-top: 150px;margin-left: 150px;background-color: beige;}.alone {width: 300px;height: 300px;background-color: blueviolet;/* 绝对定位：距离顶部0px，距离右边0px */position: absolute;top: 100px;left: 100px;}</style>
</head><body><div class="father"><div class="alone"></div></div>
</body></html>

注意：绝对定位式脱离文档流，直接在标准的文档流中删除，元素原来的位置会被占用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 50px;width: 50px;}section{position: relative;background-color: aqua;}.d1 {background-color: red;}.d2 {background-color: green;position: absolute;top: 20px;left: 30px;}.d3 {background-color: blue;}</style>
</head><body><section><div class="d1">div1</div><div class="d2">div2</div><div class="d3">div3</div></section>
</body></html>

总结：

- 绝对定位元素脱离正常流(文档流)，所以元素原来的位置会被其他元素占用。
- 因为绝对定位元素脱离了正常流，和相对元素一样也会有覆盖其他元素的情况。
- 绝对定位元素是相对于祖先元素，和相对定位不同，相对定位是相对于元素自己原来的位置。
- 绝对定位元素的祖先元素是设置的position: static，该祖先元素并不作为参考物。
- 绝对定位元素的祖先元素有多个都设置了position: absolute或position: relative ,那么是以最近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位。

【固定定位和绝对定位】相关推荐

CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
css固定定位与绝对定位的区别
绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和 ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例: 当容器的position属性值为relative时,这个容器即被相对定位了.相对定位和其他定位相似,也是独立出来浮在上面.不过相对定位的容器的top(顶部).bottom( ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
绝对定位、相对定位、固定定位特点
一.定位 1.定位的定义某个元素可以自由地在盒子上面移动,并且可以压着其他元素当滚动窗口时,某个元素可以固定在页面上可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子,或者可以在屏幕上固定 ...
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
固定定位及布局知识总结
回顾浮动如何设置浮动 float:left\right\none 设置浮动之后的特点脱离文档流. 对父元素和后面元素的影响块状元素,可以共享一行.多个元素浮动,宽度超过父元素会自动换行元素一旦浮 ...

【固定定位和绝对定位】

固定定位【"position:fixed"】

定义：

应用场景：

绝对定位【position:absolute】

定义：

无父盒子

有父级盒子（父级无相对）

有父盒子（父级有相对）

总结：

【固定定位和绝对定位】相关推荐

最新文章

热门文章