CSS学习21：fixed（固定定位）

固定定位是元素固定于浏览器可视区的位置。（认死理型）主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
```
 选择器 { position: fixed; }
```
固定定位的特点：（务必记住）：

1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）
- 完全脱标—— 完全不占位置；
- 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
  - 跟父元素没有任何关系；单独使用的
  - 不随滚动条滚动。

<head><style>.nav {position: fixed;/* 固定定位的盒子也必须写边偏移 */top: 200px;left: 100px;width: 100px;height: 300px;background-color: #ccc;}body {height: 2000px;}.box {width: 500px;height: 400px;border: 1px solid #000;margin: 100px auto;}</style>
</head>
<body><div class="box"><!-- 固定定位的盒子 和父级元素没有任何关系 --><div class="nav"></div></div><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p><p>pppppppppppppppppppppppppppppppppppppppp</p>
</body>
</html>

CSS学习21：fixed（固定定位）相关推荐

html中fixed属性,css fixed固定定位属性
[实例介绍] css fixed固定定位属性当容器的position属性值为fixed时,这个容器即被固定定位了.固定定位和绝对定位非常相似,不过被定位的容器不会随着滚动条的拖动而变化位置.在视野 ...
CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
一.简介今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果.虽然这个场景,我还没有在实际工作中用到过 ...
position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
CSS学习221~249（定位+元素的显示隐藏）
1 定位 1.1 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 1.2 ...
1、position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
固定定位失效问题（position：fixed;固定定位）
PC端项目: 父级设置了transform: translate(0, 0);后,子级的固定定位会失效:(解决办法,去除父级的transform: translate(0, 0); 即可) html: ...
定位：relative相对定位、absolute绝对定位、fixed固定定位
作者有话说:在学定位之前有了解过吗?再没学浮动之前,这些块元素标签会出现在一列,要想实现并排就可以使用浮动float,现在我们可以学习定位,给背景图片或者图片.div.border等添加属性等,有定位 ...
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
问题 css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角. .container{ width: 100px; hei ...
CSS-position: fixed固定定位
固定定位 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
No.11 position定位之 fixed固定定位
在css中,使用position(定位),它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素.甚至是浏览器窗口本身的位置. 本篇介绍: fixed(固定定位) fixed定 ...

CSS学习21：fixed（固定定位）

CSS学习21：fixed（固定定位）相关推荐

最新文章

热门文章