CSS 固定定位 position fixed

简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；
注意：固定定位的位置是相对当前浏览器窗口的

代码示例：

1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；

代码：

<!doctype html>
<html><head><meta charset="utf-8"><title></title><style>*{margin:0;padding:0;}.abc{width:200px; height:200px; background-color:red; border:2px solid yellow;}</style></head><body><div class="abc"></div></body>
</html>

显示如下：

2. 然后给 div 元素添加固定定位：设置 position:fixed; left:100px; top:100px;

代码：

<!doctype html>
<html><head><meta charset="utf-8"><title></title><style>*{margin:0;padding:0;}.abc{width:200px; height:200px; background-color:red; border:2px solid yellow;position:fixed; left:100px; top:100px;}</style></head><body><div class="abc"></div></body>
</html>

显示：

3.我们再次修改定位： position:fixed; right:100px; top:100px;

显示效果：

可以看出坐标系是不断变化的，

那么： left + top：相对于左上顶点进行位移
left+bottom：相对于左下顶点进行位移
right +top：相对于右上顶点进行位移
right +bottom：相对于右下顶点进行位移

CSS 固定定位 position fixed相关推荐

跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
关于固定定位position: fixed；和横向滚动overflow-x: scroll；无法同时使用的问题
在做项目时遇到一个功能是要把某个盒子固定在底部,并且是要横向滑动的,发现position: fixed;和overflow-x: scroll;同时使用无效,现记录一下解决方法 <style&g ...
解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题
在一次vue项目开发中发现按钮设置成固定定位后,依旧随屏幕滚动,变成了相对定位的效果. 查阅资料后发现: 父级元素设置有效的transform属性会导致子元素固定变成绝对元素, 此时会导致子元素和父级 ...
html消除绝对定位的影响,css定位常用属性 CSS清除定位position
css中定位position有哪几个属性值? absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位: 元素的位置通过 "left", &quo ...
自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 "浮起来" 字上面, 那么我们的position定位关键在于一个 & ...
CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
CSS基础——定位 (position)【学习笔记】
定位(position) 1. CSS 布局的三种机制网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
CSS——固定定位和Z-index值
固定定位就是相对浏览器窗口定位,绝对定位的一种特殊形式.它以浏览器窗口作为参照物来定义网页元素,当position属性取值为fixed时,即为固定定位. 当对元素设置固定定位后,它将脱离标准文档流的 ...

CSS 固定定位 position fixed

CSS 固定定位 position fixed

CSS 固定定位 position fixed相关推荐

最新文章

热门文章