71_固定定位（相对于浏览器视口进行定位）

已于 2022-06-13 10:46:07 修改
阅读量533 收藏
点赞数
分类专栏： HTML CSS 基础
于 2021-08-20 21:07:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gty204625782/article/details/119831476
版权

css3 前端 css
固定定位的特点：
  • 开启固定定位后，如果不设置偏移量，元素的 位置 不会发生改变
  • 开启固定定位后，元素会脱离文档流，则元素的宽高默认由内容撑起
  • 固定定位也是一种绝对定位，与绝对定位不同的是，固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页滚动条的滚动而发生位置的变化
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序开发踩坑：页面窗口定位（相对于浏览器定位）（推荐）
10-17
主要介绍了小程序开发页面窗口定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
java学习笔记（19）java中css的三种定位----绝对定位、相对定位、相对浏览器定位
weixin_49750432的博客
01-16 683
1.绝对定位：当位置改变，该位置的坐标原点就会被释放， 后续的其他标签就可以占用该位置 <style> .div1{ height: 200px; width: 200px; background-color:grey; position: ab
Jquery实现相对浏览器位置固定、悬浮
真爱无限的CSDN博客
06-24 8438
$(document).ready(function () { var stayBottom = function () { ///相对于浏览器的位置（浏览器的高度+滚动到上面看不到的高度-本身的高度=层顶部到浏览器最上面的高度） var offsetTop = $(window).height() + $(window).scrollTop() - $("#bottomdiv").heig
获取定位元素相对于浏览器窗口的绝对位置
chenglvqi6440的博客
07-19 3462
//获取定位元素相对于浏览器窗口的绝对位置 function _getAbsolutePosition(obj) { //如果函数没有传入值的话返回对象为空的 if(!obj)return null; var w = ...
html属性没有位置,当绝对定位没有具有定位属性的父元素时，是相对浏览器窗口还是body或者html定位的？...
weixin_39647471的博客
06-04 206
首先MDN上原话：绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB(inital container block, 初始包含块)。而根元素所在的包含块就叫初始包含块(ICB)，所以也就是说当绝对定位的元素没有非 static定位属性的父元素时，相对于ICB定位。根元素的包含块一般是视口(连续媒体)或者由页面区域(paged media)CSS2规范对...
CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题
01-20
它允许元素脱离标准文档流，并根据相对于其他元素或浏览器窗口的位置进行布局。定位涉及到`position`属性，它有多个值，如`static`、`relative`、`absolute`和`fixed`。本篇文章将重点讨论在使用`fixed`定位时只指定...
css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
09-25
在网页设计中，CSS（Cascading Style Sheets）的`fixed`定位是一个强大的特性，它允许元素相对于浏览器窗口保持固定位置，即使页面滚动也不会改变其位置。这种效果常用于创建如“返回顶部”按钮这样的功能，使用户...
css教程之绝对定位使用详解
09-25
或者，如果需要固定定位（相对于浏览器窗口定位，即使在滚动时仍保持位置不变），可以使用`position: fixed`。 **三、定位参考对象** 1. **无偏移量设置**：若未设置`top`或`left`等偏移属性，元素会根据其最近的...
css中的三种基本定位机制
09-27
固定定位（Fixed Positioning）则是相对于浏览器窗口进行定位的，即使页面滚动，元素依然保持在屏幕的某个固定位置。通过`position: fixed;`，你可以创建例如固定在页面底部的导航栏或始终保持在视口顶部的头部。...
CSS属性之定位属性（图文详解）
09-24
固定定位的元素位置是相对于浏览器窗口，即使在滚动页面时，它也会保持在屏幕的特定位置。这在创建固定头部、侧边栏或页脚等持久性元素时非常有用。设置`position: fixed;`后，同样可以使用`left`、`right`、`top`和...
如何让position: fixed不再基于浏览器窗口定位
weixin_42097439的博客
03-30 790
MDN对position: fixed有一个注释： 当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 也就是说，只要给它的随便哪个祖先设上非none的transform，问题就解决了。这祖先可以是static的，也就是说随便哪个祖先都行。但是，由于要模拟手机体验，所以基于body元素比较妥。 比如说给body设一个transform: translateZ(0);，测试有效。 由于在PC环境下，我们通过媒体查询等手段限定了body的宽度，那么fixed元素也只会在这个宽度内
CSS---------定位
最新发布
Agont_的博客
07-18 728
CSS定位
位置 如何获取一个元素相对于视口的位置？
像树的博客
03-16 934
在开发时，会遇到一些拖动元素的需求 获取元素位置可以使用Element.getBoundingClientRect() 参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect 它会返回一组read-only值，left，top，right，bottom，x，y，width，height ...
CSS定位
qq_62755767的博客
05-23 159
position属性是用来设置元素的定位的前提，元素定位准确来说是由top，bottom，left，right四个属性来设置，但是如果没有设置position属性，这四个属性将不起作用，这四个属性也会根据position属性的不同而变化自己的工作方式。 一.position: static; 静态属性，位置不受top，bottom，left，right四个属性的影响，位置就是在HTML文件中的位置。 二.position: fixed; 设置position: fixed;的元素位置是相对于视口定位
定位布局Position
小莓的博客
08-17 115
position: static 静态（默认、非定位元素） relative 相对（定位元素） absolute 绝对（定位元素） fixed 固定（定位元素） sticky 粘滞（定位元素） 定位元素的特点: 可以使用定位规则 " top right bottom left " 1.position: static; HTML 元素默认情况下的定位方式为 static（静态）。 静态定位的元素不受 top、bottom、left 和 right 属性的影响。 posit...
将div定位到视口中心的3种常见方法
venene_的博客
11-27 823
将div定位到视口中心的2种常见方法 1.已知div宽高，通过计算定位到视口中心 <div></div> position: absolute; //先让div继承视口50%的宽高，此时div最左上角应该在视口最中心的位置 //然后移动div自身宽高的一半 left:50% top:50%; left:100px; top:100px; /* 也可以使用calc函数一步到位 通过calc计算出需要移动的值
【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 4696
一、固定定位概念语法 二、固定定位代码示例
css网页布局之定位流,JavaScript
yikenaoguazi的博客
09-21 407
day55一.定位流1.相对定位1.1相对定位的注意点1.2相对对位的应用场景2.绝对定位2.1绝对定位的参考点2.2绝对定位的注意点2.3绝对定位水平居中2.4绝对定位的应用场景3.固定定位4.静态定位5.z-index二.JavaScript1.JavaScript简介1.1javasc组成2.JavaScript引入方式3.JavaScript语法规范4.变量4.1声明变量的语法4.2变量名命名规范4.3 ES6中let5.数据类型与内置方法5.1数值(number)5.2字符串(string)5.3
Position定位
weixin_52032313的博客
03-02 1199
定位
CSS定位基石：浮动、相对、绝对与固定详解
4. 固定定位（fixed）：元素被固定在浏览器视口上，不受页面滚动影响，始终保持在屏幕上的同一位置。与绝对定位类似，但不依赖于任何祖先元素，`position: fixed` 是一个特殊的绝对定位。 5. 粘性定位（sticky）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值